Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "how to improve the display function of Markdown". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

First take a look at the effect, and then introduce the method in detail.

Check out the code highlighting plug-in used by markdown

First find an article written in markdown mode, then open Chrome, use F12-> network-> filter ".js", you can see that the code highlighting plug-in is highlight.js.

By the same token, we know that the SyntaxHighlighter plug-in is used in TinyMCE mode.

Tried a lot of methods, and finally chose the open source plug-in highlightjs-line-numbers.js, the principle is to generate a new table, add tr, td tags, and set border to none.

The methods mentioned in the official documentation of the plug-in are:

Hljs.initHighlightingOnLoad (); hljs.initLineNumbersOnLoad (); adjust the related css of markdown

Then improve the style of markdown as needed, and paste the following content into the custom css column of the page.

.cnblogs-markdown .hljs {border: none! important;} # cnblogs_post_body th, # cnblogs_post_body td, .cnblogs-post-body th, .cnblogs-post-body td {border: none! important; padding: 0;} .postCon {font-size: 15px;} .cnblogs-markdown .hljs, .cnblogs-post-body .hljs {font-family: "Consolas", sans-serif! important; font-size: 15px! Important;}. Cnblogs-markdown. Hljs, .cnblogs-post-body. Hljs {font-family: "Courier New", Sanslyseries importance; font-size: 15pximportance; line-height: 1.5 importance; padding: 5pximportance;} # cnblogs_post_body table, .cnblogs-post-body table {border: none! important; border-collapse: collapse; word-break: break-word;} to add the line number and display the specific js code of the language in which the code is used.

Then add the following js code to the footer HTML ~

(function () {if ($(".cnblogs-post-body pre > code") .length > 0) setCodeRowWithLang ($(".cnblogs-post-body pre")); else setCodeRowWithLang ($(".cnblogs-markdown pre")); / * add a line number to the code in markdown mode and call the plug-in highlightjs-line-numbers.js * / hljs.initHighlightingOnLoad (); hljs.initLineNumbersOnLoad ();}) Function setCodeRowWithLang (pre) {/ * var pre = $(".cnblogs-post-body pre"); select the code block to be processed. If it is not the first page, the selector is .cnblogs-markdown pre * / if (pre & & pre.length) {pre.each (function () {var item = $(this); var lang = item [0] .className) / * get the highlighted language and get all lowercase language names such as js/html/cpp Let's make a conversion * / var langMap = {"html": "HTML", "xml": "XML", "svg": "SVG", "mathml": "MathML", "css": "CSS", "clike": "C-like" "js": "JavaScript", "abap": "ABAP", "apacheconf": "Apache Configuration", "apl": "APL", "arff": "ARFF", "asciidoc": "AsciiDoc", "adoc": "AsciiDoc" "asm6502": "6502 Assembly", "aspnet": "ASP.NET (C #)", "autohotkey": "AutoHotkey", "autoit": "AutoIt", "shell": "Bash", "basic": "BASIC", "csharp": "C #" "dotnet": "C#", "cpp": "C++", "cil": "CIL", "csp": "Content-Security-Policy", "css-extras": "CSS Extras", "django": "Django/Jinja2", "jinja2": "Django/Jinja2" "dockerfile": "Docker", "erb": "ERB", "fsharp": "F#", "gcode": "G-code", "gedcom": "GEDCOM", "glsl": "GLSL", "gml": "GameMaker Language" "gamemakerlanguage": "GameMaker Language", "graphql": "GraphQL", "hcl": "HCL", "http": "HTTP", "hpkp": "HTTP Public-Key-Pins", "hsts": "HTTP Strict-Transport-Security", "ichigojam": "IchigoJam" "inform7": "Inform 7", "javastacktrace": "Java stacktrace", "json": "JSON", "jsonp": "JSONP", "latex": "LaTeX", "emacs": "Lisp", "elisp": "Lisp" "emacs-lisp": "Lisp", "lolcode": "LOLCODE", "markup-templating": "Markup templating", "matlab": "MATLAB", "mel": "MEL", "n1ql": "N1QL", "n4js": "N4JS" "n4jsd": "N4JS", "nand2tetris-hdl": "Nand To Tetris HDL", "nasm": "NASM", "nginx": "nginx", "nsis": "NSIS", "objectivec": "Objective-C", "ocaml": "OCaml" "opencl": "OpenCL", "parigp": "PARI/GP", "objectpascal": "Object Pascal", "php": "PHP", "php-extras": "PHP Extras", "plsql": "PL/SQL", "powershell": "PowerShell" "properties": ".properties", "protobuf": "Protocol Buffers", "Q": "Q (kdb+ database)", "jsx": "React JSX", "tsx": "React TSX", "renpy": "Ren'py", "rest": "reST (reStructuredText)" "sas": "SAS", "sass": "Sass (Sass)", "scss": "Sass (Scss)", "sql": "SQL", "soy": "Soy (Closure Template)", "tap": "TAP", "toml": "TOML" "tt2": "Template Toolkit 2", "ts": "TypeScript", "vbnet": "VB.Net", "vhdl": "VHDL", "vim": "vim", "visual-basic": "Visual Basic", "vb": "Visual Basic" "wasm": "WebAssembly", "wiki": "Wiki markup", "xeoracube": "XeoraCube", "xojo": "Xojo (REALbasic)", "xquery": "XQuery", "yaml": "YAML"} Var displayLangText = ""; if (lang in langMap) displayLangText = langMap [lang]; else displayLangText = lang; item.find ('hljs'). Prepend ('+ displayLangText +');});};}

The premise of using highlight-line-number.js is that you have already include into highlight.js. Although the home page is not load highlight.js by default, you can use the getScript function of JQuery to load it.

This is the end of the content of "how to improve Markdown display function". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.