Blogger Highlight.jsによるシンタックスハイライトの設定方法を解説

どうも。どっことです。今回は、Bloggerにコードを載せるためのシンタックスハイライトの設定方法を解説していきます。

シンタックスハイライト：highlight.js

Bloggerのhead内に追記する。

Getting Started

<!-- syntax highlight-->
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css' rel='stylesheet'/>
<style>code{font-family:Menlo,Consolas,Courier,monospace;color:#333;background:#f8f8f8};</style>
<style>kbd{padding:.1em .6em;border:1px solid rgba(63,63,63,0.25);-webkit-box-shadow:0 1px 0 rgba(63,63,63,0.25);box-shadow:0 1px 0 rgba(63,63,63,0.25);font-size:.7em;font-family:sans-serif;background-color:#fff;color:#333;border-radius:3px;display:inline-block;margin:0 .1em;white-space:nowrap}</style>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/awk.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/erlang.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/erlang-repl.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/go.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/ldif.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/scheme.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/yaml.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>

ただしハマりポイントとして、リンクタグやスクリプトタグはエンドタグを別に書かないと、だいたい正しく動作しない。つまり、

<link href="..." rel="..."/>

ではなくて

<link href="..." rel="..."></link>

こう書く。スクリプトも同様。

コード部分の記載を変更

記事内のコード部分を

<pre><code></code></pre>

で囲って記載する。これで書いたら、いったん動作確認。

スタイルを変更する

default.min.css の部分を変えると、スタイルを変えられるとのこと。ハイライトのデモページ、スタイル一覧はGitHubのコードを参照して、draculaに変えることにした。

highlight.js demo

GitHub /styles

default.min.css

を

dracula.min.css

に変えて動作確認。ちなみに、dracula.cssでは動作しなかった。

参考

• Bloggerで技術ブログを書くためのカスタマイズ
• Highlight.js

JavaScript ユーザに画像を選択させる

ユーザにローカルの画像を選択させてWebページ上に反映させたかったので調べた。

画像を選択させるための導線

<input type="file" id="myImage" accept="image/*">
<img id="preview">

• input タグを使う。
• type はfile を指定する。
• acceptというattributeがあるから、それにimageを設定する。

ユーザが選択した画像を画面に反映する

$('#myImage').on('change', function (e) {
  var reader = new FileReader();
  reader.onload = function (e) {
    $("#preview").attr('src', e.target.result);  
  }
  reader.readAsDataURL(e.target.files[0]); 
});

• inputに対して、ユーザが何かしら選択したことを検知するリスナーを付与
• FileReaderで読み込んで、読み込んだ画像をsourceとしてimageタグに付与
• jqueryで書かれてるぽい

参考

• 【JavaScript】input[type=”file”]で選択した画像をimg要素で表示する