Page use, often used to show the code. Different color codes, can make the code appear more intuitive, more beautiful.
Find a few different plug-ins, plug-ins that highlight the more practical and simple to use up fried chicken.
Like this:
First, we'll download a highlight js file.
Click to get version button to enter the language selection
Check your favorite language, when using the plug-in will automatically detect the language code you want to display, and automatically make the code highlighted. Usually common enough to use.
Then click on the download button below to download, unzip, there will be js file and css file.
js file determines which parts will become the highlight of your code, css file determines your code will become what color ~
Highlight.pack.js find a file in the file after decompression, the import of this js file in use.
<script src="js/jquery-3.1.1.js"></script> <script src="js/highlight.pack.js"></script>
Open the file inside the styles, there are a lot of css file. These files can change css style show your code, including highlight color and background color (color theme).
The kind of style you want to use only need to import the style css file can be in use. What style do not understand English are these representatives? This website has the effect of various css files show: https://highlightjs.org/static/demo/
Here I chose a dark.css file:
<link rel="stylesheet" type="text/css" href="css/dark.css"/>
After you import the file js and css files then you can use.
In use, be sure to pack the code you want to show in <pre> <code> </ code> </ pre> tag! ! !
Like this:
In principle, the system will automatically detect the content of your code, but if you do not worry, you can play in the <code> tag with the code language used by a class name
Like this:
Well, let's look at the results:
This is just dark.css color of this style, want other colors it ourselves -
If your code contains a label, remember the "<" with "& lt", the ">" tag is replaced by "& gt" oh