2016年12月22日木曜日

Bloggerでhighlight.jsを使ってシンタックスハイライトを実現する方法



結論から


  1. Bloggerの[テンプレート]-[HTMLの編集]をクリック
  2. </head>を探す
  3. その上に以下の3行を挿入して保存
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github.min.css /">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
以上。


ハマリポイント

テンプレートによってはうまくいかない。動的ビューというテンプレートではうまく反映されなかった。原因は究明していない。うまくいかない時は、テンプレートを変えてみることをお勧めする。
動的ビューのテンプレートでうまく反映させる方法がわかった人はぜひ教えてください。



この記事が古くなっても最新の対応ができるように、以下で解説。


シンタックスハイライトとは?


プログラミング言語などを分かりやすく色付けすること。


highlight.jsとは?


ブログなどのWebでハイライト表示をする時に使われるデファクトスタンダードのライブラリ。


公式サイトから使用方法を参照する


highlight.jsの公式サイト(https://highlightjs.org/)を参照する。
[Get Version X.X.X]ボタンをクリック。
CDNとは、コンテンツ・デリバリー・ネットワーク(Contents Delivery Network)の略で、代わりにコンテンツ配信してくれるサーバーのこと。そのCDNにあるhighlight.jsを利用する方法が(2通り)書かれている。(どちらでも良いので)これをコピペする。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github.min.css /">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
一つ画面を戻って、今度は[Usage]をクリック。
使い方で示されている3行目だけを使う。さっきの2行の後ろにコピペする。
<script>hljs.initHighlightingOnLoad();</script>
このあわせて3行をテンプレートの</head>の上に書けばOK。


0 件のコメント:

コメントを投稿