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/

 

 

 

Affinger5でのhighlight.jsの使用方法

 

Affinger5でhighlight.jsを使用するためには次の手順で行うことができます。

 

  1. AFFINGER5管理画面
  2. その他
  3. 上級者向け
  4. <head> コードの出力
  5. 次のコードをコピペ

 

コピペするコード(現地点で有効なコード)

 

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script> <script>hljs.highlightAll();</script>

 

 

 

 

あとは、デコレートしたい部分を<pre><code> </code></pre>で囲むだけです。

 

<pre><code>

<h1><?php echo do_shortcode() ; ?></h1>

</code></pre>

 

よくプログラマーがおしゃれにコードを記述されていますよね?

 

これであなたもプログラマーの仲間入りですね。

 

  • この記事を書いた人

hide

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

-30DAYSトライヤル

© 2021 hide blog Powered by AFFINGER5