適用しているデザインテーマは Minimalism 。
これからBrooklynへ変更予定。
はてなブログには スーパーpre記法 でシンタックス・ハイライトする機能がある。
しかし、はてな記法かMarkdownかでしか利用できず、見たままでは使用できない。
HTML編集を使いたいので、はてな記法もMarkdownも困る。
かなり手間だが、スーパーpre記法で生成されたページからhtmlをコピペする手順を覚え書き。
OS は Windows10 、ブラウザは Microsoft Edge 44.17763.1.0 。
はてな記法でソースコードのページを生成 [シンタックス・ハイライト]
作ろうとしている記事と別の記事をはてな記法で作成して、ソースコードが記述されたページを作る。手順はこのサイトを参照。
プレビュー画面で十分。
ページからhtmlを取り出す
生成したページ（プレビュー画面）で右クリックし、「ソースの表示」をクリック。
「要素」タブを選択して、「要素の選択（Ctrl + B）」をクリック。
ページの中で、htmlを取得したい部分をクリック。
htmlが表示されるので、右クリックして「コピー（Ctrl+C）」をクリック。
htmlコードを貼り付け [HTML編集]
本来ソースコードを貼り付けたい記事の HTML編集 に貼り付ける。
作成されたページ
シンタックス・ハイライトのカスタマイズ
シンタックス・ハイライトは <pre> ～ </pre> タグで記述される。
背景色や文字色はカスタマイズ可能。
デザイン > カスタマイズ > デザインCSS
/* ソースコード */ .entry-content pre{ background-color: #eeeeee; /* 背景色 */ color: #cccccc; /* 文字色 */ font-size: 15px; /* 文字サイズ */ line-height: 1.2; /* 行の高さ */ } .synSpecial { color: #50aeae; } /* 特殊文字・記号 */ .synType { color: #cc99cc; } /* 型 */ .synComment { color: #999999; } /* コメント */ .synPreProc { color: #50aeae; } /* プリプロセッサ */ .synIdentifier { color: #cc99cc; } /* 識別子 */ .synConstant { color: #99cc99; } /* 定数 */ .synStatement { color: #cc99cc; } /* ステートメント */
Page移動
