メニュー

メニュー

2017年1月16日月曜日

Bloggerにhighlight.jsを設定してコードの表示を変えてみた | 日々のメモ帖 by holidaybuggy1980 holidaybuggy1980
300 300

Bloggerにhighlight.jsを設定してコードの表示を変えてみた

ブログにコードを掲載する際、きれいに表視させるには結構手間がかかるものです。

javascriptとCSSを併用すればきれいに表示できるのですが、一から作りこむとなると一苦労です。

シンタックスハイライトというものを利用すればきれいにコードを表示できるようで、いろいろ試しましたが、highlight.jsが動作が軽かったので当ブログにも設定してみました。

コードの取得

highlight.js のサイトにアクセスしてCDNコードの取得

これにより、自分でjsファイルやcssファイルをアップロードしなくても使用することができますが、読み込みに時間がかかる場合があるので、ソースに導入する場合は、設置する場所が重要になってきます。

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

設定

 取得したコードを<head></head>タグの中に張り付ける。

使用方法

 使用するコードを<pre><code>~</code></pre>で囲む
<pre><code>
  //使用するコード
</code></pre>

サイトの速度を早くしたい場合


上記に示したコードを</body>タグの直前に設置するほうが、ページ全体の読み込みが早くなるようです。


以上、参考にしていただけたら幸いです。

<2017.3.30追記>
文章を追加しました。

0 件のコメント:

コメントを投稿