サポート #115
未完了
高橋 徹 さんがほぼ4年前に追加.
ほぼ4年前に更新.
説明
はてなブログのコードブロックで改善したい項目
- ファイル名をコードブロックの見出しに表示したい
- 行ごとに色分けしたい
- 行番号を表示する／しないの制御を個々にしたい
ソース種類を指定したコードブロックのHTML構成は
＜pre class="code xml" data-lang="xml" data-unlink＞
:
＜/pre＞
ソース種類を指定しない場合のコードブロックのHTML構成は
＜pre class="code" data-lang data-unlink＞
:
＜/pre＞
ファイル
関連するチケット
1 (0件未完了 — 1件完了)
- ステータス を 新規 から 進行中 に変更
- 進捗率 を 0 から 50 に変更
はてなブログのmarkdownで、次の様にファイル種類の後にコロンで区切ってファイル名等を指定すると、コードブロックの先頭に指定したファイル名等を表示できるようにする。デフォルトのはてなブログではコロンで区切ったらファイル種類指定ごと無効になってしまう。
```xml: poi.xml
<?xml version='1.0'?>
```
参考にしたページ
これらを参考に、以降実験を実施する。
実験１： 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;
}
実験２：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 のテーマをいくつか試してみたところ、背景画像があるものは画像が表示されなかった
他の形式にエクスポート: Atom
PDF