How to use prism to brighten the code when using markdown in wordpress

This article mainly introduces the use of prism for code highlighting when wordpress uses markdown. It has a certain reference value. Now I share it with you. Friends in need can refer to it

Background: I recently switched my blog’s article editor to markdown, but I found that the CSS that comes with the wordpress theme cannot achieve code highlighting. As an obsessive-compulsive disorder, it seems very uncomfortable, so I tried my best to achieve code highlighting in markdown. .

1. Use markdown editor

First of all, you need to switch the article editor that comes with wordpress to markdown. Here you need to install the markdown plug-in. After several comparisons, I chose WP Editor .md plug-in, a markdown editor that can be previewed in real time. Please read the plug-in description in detail for its specific advantages.
Plug-in screenshot:

The most important thing is that the plug-in code highlighting uses prism, so the code in the editing stage will automatically use prism syntax. , no additional settings are required. If you don’t believe it, you can check the html source code of your article. There will be the following syntax:

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

The code highlighting option is switched on in the plug-in settings, "Syntax Highlighting Option-Support Prism Syntax Highlighting"# Turn on in ##.

2. Go to the prism official website to download your own css and js files

Download address: http://prismjs.com/download.htm

Select your commonly used 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 the wordpress theme

Enter the folder corresponding to the theme, create the prism folder, and put the prism.js and prism.css files into the folder

Modify funcations.php file, the custom path in it is the storage path of prism.js and prism.css files

function add_prism() {        
wp_register_style(            
'prismCSS', 
            get_stylesheet_directory_uri() . 'prism/prism.css' //自定义路径
         );          
wp_register_script(            
'prismJS',            
get_stylesheet_directory_uri() . 'prism/prism.js'   //自定义路径
         );        
wp_enqueue_style('prismCSS');        
wp_enqueue_script('prismJS');
    }
add_action('wp_enqueue_scripts', 'add_prism');

4.Enjoy

Okay, you can refresh your article at this time. You will find that code highlighting has been implemented, it is that simple!

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

WordPress realizes that the password is displayed directly on the page after registration in the registration interface

Use PHPstudy in Deploying PHP system under Windows server

The above is the detailed content of How to use prism to brighten the code when using markdown in wordpress. For more information, please follow other related articles on the PHP Chinese website!