Use in HTML files

Import CDN files

Use CDN links to import the necessary files, one CSS, one JS file. (Note that CDN links of individual sites are sometimes inaccessible in China, so you can test them in your browser before using them.)

<! DOCTYPE html> <html> <head> <title>Prism</title> <link Href = "https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism.min.css" rel = "stylesheet" / > < / head > < body > < script SRC = "https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/prism.min.js" > < / script > < / body > < / HTML >Copy the code

Highlight the code

CSS， JS

If you want to highlight the code directly, write it in 

...

set the corresponding language-xxx property, such as directly display CSS, JS code, highlight effect 

. <body> CSS <pre><code class="language-css">p { color: red; }</code></pre> JavaScript <pre><code class="language-js">function getName() { return 'Mike'; }</code></pre> <pre><code class="language-js">function getName() { return 'Mike'; } < / code > < / pre > < script SRC = "https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/prism.min.js" > < / script > < / body >...Copy the code

Code formatting displays need to be handled separately, such as JS code formatting highlighting

<pre><code class="language-js">function getName() { 
  return 'Mike'; 
}</code></pre>
Copy the code
HTML

 tags don't highlight the original code. Browsers parse tags like 
Title

HTML
<pre><code class="language-markup"><h1>Title</h1></code></pre>
<pre><code class="language-html"><h1>Title</h1></code></pre>
Copy the code

Highlighting HTML correctly requires the introduction of a plugin. A CSS prism-undance-markup. Min. CSS and a JS prism-undance-markup. Min. js package with script type=”text/plain”

< link href = "https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/plugins/unescaped-markup/prism-unescaped-markup.min.css"  rel="stylesheet" /> ... HTML code <pre><code><script type="text/plain" class="language-markup"><h1>Title</h1></script></code></pre> ... <script SRC = "https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/plugins/unescaped-markup/prism-unescaped-markup.min.js" > < / scrip t>Copy the code

Highlight external files

If you have too much code and need to format the display, you can import the file as an external file using the data-src attribute of the 

 tag. Default support for HTML, CSS, JS, SVG, etc

HTML file
<pre data-src="./assets/index.html"></pre>
CSS File
<pre data-src="./assets/main.css"></pre>
JS File
<pre data-src="./assets/code.js"></pre>
SVG File
<pre data-src="./assets/logo.svg"></pre>
Copy the code

If you highlight python external file code, you need to introduce a plugin prism-Autoloader.min.js file. Same idea for other types (note the order in which files are introduced)

. <body> ... HTML file <pre data-src="./assets/index.html"></pre> CSS File <pre data-src="./assets/main.css"></pre> JS File <pre data-src="./assets/code.js"></pre> Python File <pre data-src="./assets/code.py"></pre> <script SRC = "https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/prism.min.js" > < / script > < script SRC = "https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/plugins/autoloader/prism-autoloader.min.js" > < / script > < / body > .Copy the code

conclusion

At present, there are only so many functions of experience, and some other features are not used. It is mainly used for basic understanding and practice. When there is a problem in actual use, I will record it.

Github project source

Github.com/gywgithub/e…

Refer to the link

prismjs.com

Cdnjs.com/libraries/p…

Prismjs.com/plugins/une…