Comment utiliser le prisme pour éclaircir le code lors de l'utilisation du markdown dans wordpress

Cet article présente principalement l'utilisation du prisme pour la mise en évidence du code lorsque WordPress utilise le markdown. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Contexte. : J'ai récemment changé l'éditeur d'articles de mon blog en markdown, mais j'ai trouvé que le CSS fourni avec le thème WordPress ne peut pas mettre en évidence le code. En tant que trouble obsessionnel-compulsif, cela semble très inconfortable, j'ai donc fait de mon mieux pour y parvenir. mise en évidence du code dans markdown.

1. Utilisez l'éditeur de démarques

Tout d'abord, vous devez basculer l'éditeur d'articles fourni avec wordpress vers markdown. Ici, vous devez installer le plug-in de démarque. J'ai choisi le plug-in WP Editor .md, un éditeur de démarques qui peut être prévisualisé en temps réel. Veuillez lire la description du plug-in en détail pour ses avantages spécifiques.
Capture d'écran du plugin :

La chose la plus importante est que la mise en évidence du code du plug-in utilise le prisme, donc le code en phase d'édition utilisera automatiquement le prisme syntaxe , aucun paramètre supplémentaire n’est requis. Si vous ne me croyez pas, vous pouvez vérifier le code source html de votre article. Il y aura la syntaxe suivante :

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

Le commutateur de l'option de surbrillance du code se trouve dans les paramètres du plug-in, "Option de mise en évidence de la syntaxe - Prend en charge la mise en évidence de la syntaxe Prism » pour ouvrir.

2. Accédez au site officiel de prism pour télécharger vos propres fichiers CSS et js

Adresse de téléchargement : http://prismjs.com/download.htm
Sélectionnez votre langue couramment utilisée. et la configuration, cliquez sur TÉLÉCHARGER JS et TÉLÉCHARGER CSS pour télécharger les fichiers css et js, c'est-à-dire les fichiers prism.js et prism.css.

3. Modifier le thème wordpress

Entrez le dossier correspondant au thème, créez un dossier prism, et mettez les fichiers prism.js et prism.css dans le dossier

Modifiez le fichier funcations.php, le chemin personnalisé qu'il contient est le chemin de stockage des fichiers prism.js et prism.css

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 Profitez-en

D'accord, vous pouvez maintenant actualiser votre. Article, vous constaterez que la mise en évidence du code a été implémentée, c'est aussi simple que ça !

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

WordPress se rend compte que le mot de passe s'affiche directement sur la page après inscription dans l'interface d'inscription

Utilisez PHPstudy dans le déploiement du système PHP sous le serveur Windows

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!