はてなブログでコードをハイライトつきで貼り付けるには【HTML】
はてなブログでEclipseやAndroid Studioで作成したプログラミングのコードを、シンタックスハイライトつきで貼り付ける方法をやっと見つけました。
preタグcodeタグでくくる
Eclipseなどの統合開発環境でまずコードをコピーします。
はてなに貼り付けたら、HTML編集モードに行き、<pre><code> ~ </code></pre>でくくってください。
preタグは、スペースやタブなどをそのまま残してくれます。
preタグでくくらないと、HTMLにインデントを喰われてしまいます。
codeタグはまさにプログラムのソースコードのためのタグです。
このタグでくくってあると、ブラウザがこの部分がコードだと認識してくれます。
cssを埋め込む
preタグにcssを設定します。
はてなの場合、このcssを埋め込む場所が分かりづらくて、だいぶ探しました。
ここです。
CSSは、今回は次のようにしてみました。
pre {
margin: 1em 0;
padding: 1em;
border-radius: 5px;
background: #25292f;
color: #fff;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
↓こちらのサイトを参考にいたしました。
シンタックスハイライトつきにする
シンタックスハイライトは、ライブラリを利用します。
はてなでリンクを貼る箇所はここです。
今回貼り付けたのは以下のコードです。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/dracula.min.css">
先ほど紹介したこちらのサイト↓
にあったものです。
スクリプトははてなでは「デザイン」の「記事」の中の「記事下」に貼り付けます。
貼り付けたコードはこれです。
<!-- JSファイルの読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
<script>
// ハイライトを実行
hljs.initHighlightingOnLoad();
</script>
これも
にあったものを参考にしました。
最後に、変更を保存します。
以上です。