How to use Prism to brighten code when using Markdown in WordPress

This article mainly introduces the use of markdown when using prism to highlight the code, has a certain reference value, and now share to everyone, the need for friends can refer to

background: Recently the blog's article editor switched to Markdown, but found that WordPress theme comes with CSS can not implement code highlighting, as obsessive-compulsive disorder looked very uncomfortable, and then try to implement the method in the Markdown code highlighting.

1. Using the Markdown Editor

First of all, you need to be WordPress comes with the article editor to switch to Markdown, here need to install Markdown plug-ins, after several comparisons, choose WP editor.md plug-in, a real-time preview of the Markdown editor, Specifically, you can read the plugin instructions in detail.
Plugins:

The main thing is that the plug-in code highlighting is the use of prism, so in the editing phase of the code will automatically use the PRISM syntax, no additional settings are required. Do not believe you can view the HTML source of your article, there will be the following syntax:

<pre class= "language-c" ><code class= "language-c" >  code_here </code></pre>

The switch of the code highlighting option is turned on in the plugin's settings,syntax highlighting option-support prism syntax highlighting .

2. Go to the PRISM website to download your own CSS and JS files

Download Address: http://prismjs.com/download.htm
Choose your favorite language and configuration, click DOWNLOAD js and DOWNLOAD css to download CSS and JS files, that is, Prism.js and prism.css files.

3. Modify WordPress Theme

Enter the folder for the theme, create the Prism folder, and put the Prism.js and Prism.css files in the folder

Modify the funcations.php file, where the custom path is the storage path for the prism.js and prism.css files

function Add_prism () {        wp_register_style (            ' prismcss ',             Get_stylesheet_directory_uri (). ' Prism/prism.css '//custom path         );          Wp_register_script (            ' Prismjs ',            Get_stylesheet_directory_uri (). ' Prism/prism.js '   //custom path         );        Wp_enqueue_style (' prismcss ');        Wp_enqueue_script (' Prismjs ');    } Add_action (' wp_enqueue_scripts ', ' add_prism ');

4.Enjoy

Well, this time you refresh your article, you will find that the code has been implemented to highlight, it is so simple!

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!