Wordpressでマークダウンを使用するときにプリズムを使用してコードを明るくする方法

この記事では主に、WordPress でマークダウンを使用する場合にコードをハイライトするためのプリズムの使用について紹介します。これには特定の参考値があります。今、共有します。必要な友人はそれを参照できます。

背景: 最近、ブログの記事エディタをマークダウンに切り替えたのですが、WordPress テーマに付属している CSS ではコードの強調表示が実現できないことが分かりました。強迫性障害の私としては非常に不快に思うので、できる限りの努力をしてみました。マークダウンでコードを強調表示します。

1.マークダウンエディタを使う

まず、WordPressに付属している記事エディタをマークダウンに切り替え、ここでマークダウンプラグインをインストールする必要があります。私は、リアルタイムでプレビューできるマークダウン エディターである WP Editor .md プラグインを選択しました。その具体的な利点については、プラグインの説明を詳しく読んでください。
プラグインのスクリーンショット:

最も重要なことは、プラグインのコードの強調表示にはプリズムが使用されているため、編集段階のコードが自動的に強調表示されることです。 prism 構文を使用するため、追加の設定は必要ありません。信じられない場合は、記事の HTML ソース コードを確認してください。次のような構文があります:

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

コードのハイライト オプションはプラグイン設定でオンになっています。 「構文強調表示オプション - プリズム構文強調表示をサポート」 でオンにします。

2. prism 公式 Web サイトにアクセスして、独自の css および js ファイルをダウンロードします

ダウンロード アドレス: http://prismjs.com/download.htm
よく使用する言語を選択してくださいおよび構成では、「DOWNLOAD JS」および「DOWNLOAD CSS」をクリックして、css ファイルと js ファイル、つまり prism.js および prism.css ファイルをダウンロードします。

3. wordpress テーマを変更します

テーマに対応するフォルダーに入り、prism フォルダーを作成し、そのフォルダーに prism.js と prism.css ファイルを置きます

funcations.php ファイルを変更します。その中のカスタム パスは、prism.js および 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.Enjoy

わかりました。ここで記事を更新できます。コードのハイライト表示が実装されていることがわかりますが、とても簡単です。

上記がこの記事の全内容です。皆様の学習に少しでもお役に立てれば幸いです。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

WordPress は、登録インターフェイスでの登録後、パスワードがページに直接表示されることを認識します

Windows サーバーでの PHP システムのデプロイで PHPstudy を使用する

#

以上がWordpressでマークダウンを使用するときにプリズムを使用してコードを明るくする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。