アゴ乗せ日記

適当なポジティブ日記

スポンサーリンク

【はてなブログ】ソースコードの色変更とファイル名表示【初心者OK】

さて、やっていく

まずは色の変更

次のコードをデザインCSSに貼り付ける

.entry-content pre.code {
    background-color: #3F3F3F;
    color: #DCDCDC;
}
.synSpecial { color: #cc9393; }
.synType { color: #E3CEAB; }
.synComment { color: #7A987A; }
.synPreProc { color: #8c8cb4; }
.synIdentifier { color: #6e96be; }
.synConstant { color: #cc9393; }
.synStatement { color: #efc986; }

結果は以下の通り

f:id:agonosetaro:20200225110417p:plain

画面が黒くなってだいぶプロのグラマーっぽくなった。

スマホも対応する場合はスマホの設定画面のヘッダ、記事内、フッタどこでもいいから上記のCSSを<style></style>で囲って追記する。

ファイル名の表示

以下の記事が参考になる。

itouuuuuuuuu.hatenablog.com

こんな感じになった

f:id:agonosetaro:20200226093946p:plain

記述の簡略化

ただし毎回 <div class="code-title" data-title="ここにタイトル!"> は長くて書きたくない。

上の設定は残しつつスクリプトを追加していく。

ちなみに、この方法は Markdown記法 を使用している人に限られると思う。
エンジニアならまぁデフォルトスタンダードだろう。

自分がソースコードを書くときはこんな感じだ。

```css
.test {
 color: red;
}
```

今回やりたいのはオレンジ色の部分でファイル名を追加する。

```css:デザイン.css
.test {
 color: red;
}
```



記述が圧倒的に楽

やり方

設定 > 詳細設定 > 検索エンジン最適化 > headに要素を追加 に以下のコードを追加する

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/a11y-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 

<script type="text/javascript">
    $(document).ready( $ => {
        hljs.initHighlightingOnLoad()
        $('pre.code').each((i, elem) => {
            const class_list = $(elem).attr('class').split(' ')
            class_list.forEach( current =>  {
                        if (current.indexOf(':') >= 0) {
                                    $(elem).removeClass(current)
                                    const split = current.split(':')
                                    $(elem).wrap(`<div class="code-title" data-title="${split[1]}">`)
                                    $(elem).wrap(`<pre class="code">`)                                    
                                    $(elem).contents().unwrap().wrap(`<code class="${split[0]}">`)
                        }
            })
        })
    })
</script>

以上。

結果

```css:デザイン.css
.test {
 color: red;
}
```

と書いてプレビュー見ると

.test {
 color: red;
}

のようになる。 ハイライトとファイル名表示がちゃんとされる。

おわり

はやくレスポンシブ対応したい。

以上!!

解説

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/a11y-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>

highlight.jsっていうソースコードをハイライトしてくれるライブラリを追加。 インポートするのはcssとjsファイルの2つ。はてなはどっかにファイルを保存できるのかな?わからなかったからCDNで取り込む。

ライブラリ追加しなくてもはてなの機能でハイライトできるんちゃうの? と思うだろうが、Markdownで『ファイルタイプ:ファイル名』と書くとはてな側でMarkdownからHTMLに変換する際にハイライトが機能しなくなる。(ファイルタイプの解析ができずに、DOMの結果が変わる)

これはページを保存するときに行われるもので、Javascriptを使っても対応は難しそうだ。だから必要

<script type="text/javascript">
    $(document).ready( $ => {
       hljs.initHighlightingOnLoad()

ページの読み込みが終わったら、hljs.initHighlightingOnLoad()highlight.jsを有効化する。

       $('pre.code').each((i, elem) => {

コードブロックの箇所を検索して見つけた数だけループさせる。

           const class_list = $(elem).attr('class').split(' ')
           class_list.forEach( current =>  {
                       if (current.indexOf(':') >= 0) {

Markdownでファイル名を書くと例えばクラス名に「css:デザイン.css」みたく入るから もし発見したら下のコードを実行するよう条件追加。

ちなみにファイル名の記載がない場合は既存のはてな側のハイライトが使われる。

$(elem).removeClass(current) 
const split = current.split(':')
$(elem).wrap(`<div class="code-title" data-title="${split[1]}">`)
$(elem).wrap(`<pre class="code">`)                                    
$(elem).contents().unwrap().wrap(`<code class="${split[0]}">`)

2行目のsplitで「css:デザインcss」を「css」と「デザインcss」に区切る。
3行目でファイル名を表示する用のDOMを生成する。data-titleに2行目で区切ったファイル名の方を設定する。
4、5行目はhighlight.js用のDOMを生成する。
highlight.jsは以下のようにpreの子要素としてcodeを必要としている。
また、codeタグのクラス名にファイルタイプを設定する。

<pre><code class="css"></code></pre>

以上でMarkdownを使った簡易的なコードハイライト+ファイル名表示が実現できる。

ちなみに highlight.jsは色々テーマがあるのでインポートするcssのURL部分 を変えれば好きな色に変えられる。

テーマのプレビューは以下のURLから

https://highlightjs.org/static/demo/

CDNの一覧は以下のURLの「css」タブから確認できる

https://cdnjs.com/libraries/highlight.js/

スポンサーリンク