2018年8月15日

まずはシンタックスハイライトを設定、改。

ITブログなら、コードも沢山載せていきたいよなぁということで、 コードハイライトを設定することを検討した。
最初は google-code-prettify にしようかと考えたが、2013年から 更新がないので、恐らくメインストリームではないと判断し、別のものを探した。

検索した結果、以下のサイトで紹介されていたprism.jsを使用することにした。
https://thk.kanzae.net/net/wordpress/t1171/

表示例は以下の通り。
function main()
{
  alert("Hello world!");
}

使用方法は、先に挙げたブログにある通り、以下の公式サイトにて言語とプラグインを選択してjavascript「prism.js」とcss「prism.css」をダウンロードする。
https://prismjs.com/index.html

然る後、該当ファイルをアップロードして、カスタムスクリプトをブログで有効化した。
使い方も先のブログにある通り、<pre><code>で指定する。

ここまでは引っ越し前のlivedoor blogと同じ内容だけど、bloggerではファイルアップロード機能がないので、代替手段を検討した。
http://blogger.weblix.net/2014/07/blogger-external-file-github-pages.html
http://blogger.weblix.net/2014/01/github-pages-create-web-site.html

そのものずばりのページをみつけたので、それにそってgithubにprismのファイルを置かせていただくことにした。
ゆくゆくはWebサイトとして構成したい。気が向いたら。

ともあれ、ファイルは格納したので、テーマのHTML編集機能でヘッダに組み込んだ。

0 件のコメント:

コメントを投稿

TIPS:VSCodeで日本語化がうまくいかないとき

前置き Visual Studio Codeで拡張機能「 Japanese Language Pack for Visual Studio Code 」を入れたら日本語になりますよね。 でも、「 Remote Development 」で色々な環境を日本語化してると、偶に...