Tips: Bloggerにprismを導入する

2018年2月3日土曜日

Bloggerにprismを導入する

C#などのコードを貼る事が多いかなと思うので、見栄えを良くしたいと思います。
使用するのはPrism.js ソースコード貼るだけで、色を着けてくれます。

主に使用するのは、C#とかWPFのタグかな。
なので、C#の例で説明します。

完成イメージはこんな感じ。

０．目次

操作環境
必要なファイルの確認
Bloggerへ設定の追加
動作確認

１．操作環境

実施日は2018年2月2日
パソコンで操作
Chromeを使用

２．必要なファイルの確認

Bloggerにはファイルのアップロードが出来ないと思うので、
CDNJSで公開されているものを使用します。
https://cdnjs.com/libraries/prism

ファイルの一覧から、以下の文をメモ帳などにメモします。
※"1.10.0"の部分は取得するタイミングで変わるので置き換えてください。
バージョン番号(1.10.0)の部分と、「５．」の使用言語を書き換えれば、以降の説明文をそのままコピペするだけでもOKです。

prism/1.10.0/themes/prism.min.css
prism/1.10.0/plugins/line-numbers/prism-line-numbers.min.css
prism/1.10.0/plugins/line-highlight/prism-line-highlight.min.css
prism/1.10.0/prism.min.js
prism/1.10.0/components/prism-csharp.min.js
prism/1.10.0/plugins/line-numbers/prism-line-numbers.min.js
prism/1.10.0/plugins/line-highlight/prism-line-highlight.min.js

この中の「5.」は使用したい言語のものを選択します。
デフォルトではC#は含まれないようなので追加していますが、JavaScriptなどでは不要です。

３．Bloggerへ設定の追加

次にBloggerの設定画面で、右のサイドバーから「テーマ」を選択します。
画像のような画面になるので、「HTMLを編集」ボタンをクリックします。

表示されたHTML部の<head>タグと<body>タグに
スクリプト情報を追記します。
<head>には、
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.10.0/themes/prism.min.css' rel='stylesheet'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.10.0/plugins/line-numbers/prism-line-numbers.min.css' rel='stylesheet'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.10.0/plugins/line-highlight/prism-line-highlight.min.css' rel='stylesheet'/>

<body>には、
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.10.0/prism.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.10.0/components/prism-csharp.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.10.0/plugins/line-numbers/prism-line-numbers.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.10.0/plugins/line-highlight/prism-line-highlight.min.js'/>
を記入します。