操作
サポート #115
未完了はてなブログのコードブロックの見栄えを改善する
開始日:
2020/05/06
期日:
2020/05/10 (3年以上 遅れ)
進捗率:
50%
予定工数:
説明
はてなブログのコードブロックで改善したい項目
- ファイル名をコードブロックの見出しに表示したい
- 行ごとに色分けしたい
- 行番号を表示する／しないの制御を個々にしたい
ソース種類を指定したコードブロックのHTML構成は
＜pre class="code xml" data-lang="xml" data-unlink＞
:
＜/pre＞
ソース種類を指定しない場合のコードブロックのHTML構成は
＜pre class="code" data-lang data-unlink＞
:
＜/pre＞
ファイル
高橋 徹 さんがほぼ4年前に更新
- 説明 を更新 (差分)
実験１： OK¶
はてなブログのカスタマイズでCSSにソースコードタイトル表示を追加する。
ソースコードタイトルをはてなブログ内で指定する方法は、コードブロックを
タグで囲むものとする。
使用例
<div class="code-title" data-title="見本コード"> ```groovy println 'Hello, world' ``` </div>
- [記事の管理] > [デザイン] > [スパナアイコン（カスタマイズ）] > [{}デザインCSS]をクリック
- 次のCSSを記述
- class="code-title"要素の子要素preの上側マージンを2文字半分開ける
- class="code-title"要素のbefore擬似要素を指定し、data-title属性の値を背景色、サイズ、パディング、境界形状を指定
.code-title pre.code {
padding-top: 2.4em;
}
.code-title::before {
content: attr(data-title);
padding: 0 1em;
border-radius: 3px 0 0 0;
background: #eed;
font-size: 0.8em;
position: absolute;
}
高橋 徹 さんがほぼ4年前に更新
実験２：OK¶
タイトルを表示したいコードブロックをいちいち
<div class="code-title" data-title="ここにタイトル！">
で囲むのは甚だ面倒。
markdown形式では割と一般的な次の記法でタイトルを表示する。
```java:HelloWorld.java : ```
この制御にはJavaScriptが必要。また、はてなブログ機能のコードハイライトは上述の書き方（ファイル種類:タイトル）をするとハイライトできなくなってしまうため、highlight.jsライブラリを使ってコードブロックのハイライトを実現する。
[記事の管理] > [設定] > [詳細設定] > [headに要素を追加]のテキスト入力欄に以下CSSリンクを記述
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/solarized-light.min.css">
<link>要素はHTMLの<head>要素内に記述する必要があるため
[記事の管理] > [デザイン] > [スパナアイコン（カスタマイズ）] > [フッタ]をクリック
以下を記述
その他試したことなど¶
- highlight.js を最新バージョン（10.0.2）にしたところ動作せず
- highlight.js のテーマをいくつか試してみたところ、背景画像があるものは画像が表示されなかった
操作