30DAYSトライヤル

highlight.jsの導入

よくブログに、コードを埋め込んであるけど、どのような方法があるの??

 

このような悩みに回答したいと思います。

 

こんにちは、どひです。

今日は、書いたコードにデコレートできる、highlight.jsを紹介ます。

 

highlight.jsとは

コードをハイライトさせることが出来るJSのプラグインです。

このようにいい感じでハイライトしてくれます。

(highlight.jsなし)

<h1> <?php echo do_shortcode();?></h1>
<?php echo do_shortcode('[name]');?>
<?php while(have_posts()):the_post();?>                       body {
background: #fff;
font-size: 1em;
}

(highlight.jsあり)

<pre><code>
<h1> <?php echo do_shortcode();?></h1>
<?php echo do_shortcode('[name]');?>
<?php while(have_posts()):the_post();?>

body {
  background: #fff;
  font-size: 1em;
}

</code></pre>

highlight.jsの公式サイト

https://highlightjs.org/

 

Cocoonでのhighlight.jsの使用方法

Cocoonテーマでは、テーマ設定の中にhighlight.jsが組み込まれています。

面倒なCDN等の読み込み・設定をしなくても、Cocoon設定から使用することができます。

Wordpess管理画面から『Cocoon設定』を選択します。

highlight.jsの設定は、Cocoon設定のコード管理から行えます。

 

  • この記事を書いた人

dohi

社会人をしながら、プログラミング学習・ブログ運営をしています。 社会人の学習の大切さや、趣味のコーヒーについてのコンテンツが多い人です。

-30DAYSトライヤル

© 2021 dohi blog Powered by AFFINGER5