ソースコードをハイライトするならPrism.jsが便利
ソースコードをハイライトするライブラリを探していたところ、初心者でも使いやすく、デザインがシンプルなPrism.jsを起用することにしました。プラグイン機能を指定し、拡張できるので便利です。以下、使い方をまとめました。
Languagesでハイライトしたいプログラミング言語を選択します。
prism.jsは</body>前に下記を書き込んで下さい。
Prism.jsをダウンロードする
http://prismjs.com/download.html
出典：Prism.js
デザインと言語を選択
Themesはdefaultにしました。Languagesでハイライトしたいプログラミング言語を選択します。
行のハイライトと行番号のプラグインを追加
Line Highlight とLine Numberを選択します。
JSファイルとCSSファイルをダウンロード
カスタマイズしたデータの容量の確認が上記に出ます。
シンタックスハイライトの表示を確認し、javascript(JS)とCSSファイルデータをダウンロードしてください。19.24KB と大変軽量です。
ファイルを各ブログでアップロード
※bloggerにはファイルをアップロードする機能がないのです…。
つまりダウンロードしても意味がない。WordPress等ならばアップロードできたり、プラグインがあったりと便利そうです。
Bloggerでの方法を探したのですが、分かりませんでした。
Bloggerでの方法を探したのですが、分かりませんでした。
CDNを使用した方法でシンタックスハイライト表示して下さい。
Prismの設置
prism.jsを使用するために、headタグ内に読み込む記述を追加します。
prism.cssを<head>要素内に <style>要素で読み込ませます。
</head>の前に下記を置く。
<link href="themes/prism.css" rel="stylesheet" />prism.jsは</body>前に下記を書き込んで下さい。
<script src="prism.js"></script>Prismの活用
HTMLコード表示の際はエスケープを行う
htmlを表示させたい時は、「<」「>」「"」「'」「&」を「<」「>」「"」「'」「&」に変換する必要があります。
自動でエスケープする機能はありません。
自動でエスケープする機能はありません。
表示したコードの導入
<pre>要素の中に <code>要素があります。
<code>要素にclass属性で「language-xxxx」のように各言語を指定し、先ほど変換したコードを導入します。
<code>要素にclass属性で「language-xxxx」のように各言語を指定し、先ほど変換したコードを導入します。
<pre><code class="language-markup">導入したいHTML</code></pre>
<pre><code class="language-css">導入したいCSS</code></pre>
<pre><code class="language-js">導入したいJavaScript</code></pre>
