自分はブログごとに, 「Syntax Highlighter」とか使って, コードを綺麗にしてました . だけどこれは設定がとても大変.
(しかも, その時cdnjsという, サービスを知らなかったので, アップロードで入れてました. 知っていたらそれでいいやって妥協してたのに.)
めんどくさくない方法無いかなと探していたら, 「highlight.js」を導入している方が多かったので, それをblogに導入してみた話.
highlight.js とは
もうとっくに色んな人が解説しているので, 一言で.
- 速い
自分はこれだけの理由で導入しました. もっと利点を知りたいなら「コードのハイライト表示 JS ライブラリ ３種」など見ればいいかと
highlight.jsの導入(cdnjs経由)
まぁ, cdnjs経由の方法しか書かないんですが…(他の方法はめんどくさい. )
公式のGetting Startを見るのが良いかも.
やり方は簡単で, headタグ( <head> ~ </head>)の中(~の部分)に以下のコードを貼り付ければ良いだけです.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
私の場合はこんな感じ.
<head>
~~~~ 色々あって ~~~~
<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
</head>ちなみに, bloggerのテンプレートに記述する場合は, xmlにするので上のやつと若干違います(閉じタグがない)
テーマの変え方.
「これ以外のテーマ無いのぉ?..テーマ変えたいんだけど.」って思う方多いと思います. 実はテーマ多いです.
「highlight.js demo」の左側のStylesの下がテーマになっているので, クリックして気に入ったテーマを探して下さい.
気に入ったテーマがあれば,
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">の一番後ろのdefault.min.cssを<テーマ名>.min.cssに変えてみると, テーマが変わります.
テーマ名は全部小文字にして, 空白(" “)はマイナス(”-")に書き換える必要があります.
例えば「Arduino Light」を選ぶ場合は,
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/arduino-light.min.css">
と書きます.
まぁもちろん, こっちから探すべきなんだろうが.
ちなみに, 私はgithubにしてます. github大好き.
defaultの言語以外をhighlightしたい場合.
やりたいならこっちから言語を検索して, scriptタグを追記する形ではなかろうか. たぶん.
例えばapple scriptを入れたいなら, こっちから"applescript"を検索して, "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/applescript.min.js"が見つかるので,
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<!--ここから-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/applescript.min.js"></script>
<!--ここまで追加-->
<script>hljs.initHighlightingOnLoad();</script>
かな.
バージョンについて
今回は, highlight.jsは9.12.0を使っています. これは指定できて, urlが書いてある場所の数字を変えるか, またはcdnjsでバージョンを指定してあげれば変えられます.
本当は最新版が良いのですが, latestとかない(updateでページが動かなくなったりしたら困るかららしい)ので, バージョンは手動で選択する必要がありますね.
自動アップデートは諦めるべきか…
ちなみに
めんどくさがりでない方は, highlight.jsの導入はcdn経由でなく, アップロードで設定したほうが良いです.
なぜなら, このcdnというサービスは, ブログを開くたびにインターネットを通じて, 他のパソコン様からデータを貰っているからです. つまり,
- その偉いパソコン様が故障してしまったり,
- みんなが一気にデータがほしいと言ったら, 自分が後回しになったり
などの理由で, 見た目が変わらなかったりします.
まぁ, cdnのようなサービスは, そういうのも見越してある程度対策していたりするので, 自分は結局cdnを使いますが…
そんなの事になっても大丈夫という方のみ使って下さい.
0 コメント:
コメントを投稿