綺麗な codeをｺﾋﾟﾍﾟだけで表示させる方法

hello！

ᏞUꮇ'Ꮳꭴ. ﾃﾞｰｽ！

今回は、『codeﾀｸﾞで綺麗にｺｰﾄﾞを表示しよう！』っていうお題目で頑張ったんですよ。

軽くｸﾞｸﾞってみたものの･･

出てくるのは「はてな記法のスーパーpre記法」「Markdown記法」が多数。

試しにやってみたけど、さっぱり解らない。

もっと簡単に･･

ｺﾋﾟﾍﾟで出来る方法ないの･･？

あった！！！ ( ✧Д✧) ｶｯ!!

今回の神はｺﾁﾗ ▼

ksonoda.com

webtools.dounokouno.com

highlightjs.org

ｱﾗｻｰさんがｼｪｱしてくださっている記事内容に従い、

無事、ｺﾋﾟﾍﾟだけで思い通りのｺｰﾄﾞ表示が出来るようになりました！٩(ˊᗜˋ*)و ｩｪ～ｨ

実際に導入した方法は以下。

「codeを枠で囲う」 ▶ CSSにcodeをｺﾋﾟﾍﾟで貼り付け

/*コード枠*/
pre {
　padding: 1em;　/* 内側の余白 */
　margin: 0 0 1.5em;　/* 外側の余白 */
　border: solid 1px #4d4d4d;　/* 枠線（枠線を濃い黒に） */
　background: #25292f;　/* 背景色（背景を黒に） */
　color: #fff;　/* 文字色（文字を白に） */
}

ﾃﾞｻﾞｲﾝ ▶ ｶｽﾀﾏｲｽﾞ ▶ CSS に貼り付け。

ｴｽｹｰﾌﾟ処理をしたcodeを記事（HTML）に貼り付ける

webtools.dounokouno.com

上記ﾂｰﾙｻｲﾄの「変換前」ﾎﾞｯｸｽに、表示させたいcodeをｺﾋﾟﾍﾟ。

ｵﾌﾟｼｮﾝは２つとも✅を入れる。

「変換」ﾎﾞﾀﾝを押すと、「変換後」ﾎﾞｯｸｽにｴｽｹｰﾌﾟ処理されたcodeが表示される。

記事の「HTML編集」画面に codeをｺﾋﾟﾍﾟ。

codeをｶﾗﾌﾙに表示させる

ｱﾗｻｰさんがｼｪｱしてくださっている記事から１年以上経過しているので、

highlight.jsのｻｲﾄﾃﾞｻﾞｲﾝが変化していました。

現時点での code取得方法を載せます。

Top画像は上の画像。

本記事を書いている時点での最新バージョンは、11.8.0でした。

Top ﾍﾟｰｼﾞでｽｸﾛｰﾙﾀﾞｳﾝすると、上記のような code配布ﾎﾞｯｸｽが表示されます。

私は「jsDeliver」をｺﾋﾟｰしました。

ｺﾋﾟｰしたcodeを自分のBlogに貼り付ける

はてなブログの場合は･･

設定 ▶ 詳細設定 ▶ <head>要素にメタデータを追加

余談ですが‥

Blogのｶｽﾀﾏｲｽﾞをしてると、貼り付ける codeが増殖していきます。

HTMLの場合は、codeの頭に「」

CSSの場合は、「/* 記載したい文字 */」を付けておくと、

修正したり、後から不必要になった時に削除する時に便利です。

highlight.jsからｺﾋﾟﾍﾟした codeの下に、以下の codeをｺﾋﾟﾍﾟ。

<script>hljs.initHighlightingOnLoad();</script>

DEMOで自分の好きなﾃﾞｻﾞｲﾝを探して反映させる

表示したい codeをｺﾋﾟﾍﾟして、言語を選択。

「Theme」でﾃﾞｻﾞｲﾝを選択できます。

私は「kimbie-dark」

秋っぽい色合いで私のBlogに合ってる！(๑•᎑•๑)♡

好きな色合いのﾃﾞｻﾞｲﾝが決まったら･･

<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-
release@11.0.1/build/styles/★ここに実装したいテーマを貼り付け★.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.0.1/build/
highlight.min.js"></script>

上記の「★ここに実装したいテーマを貼り付け★」部分。

初期値では「default」で設定されているので「kimbie-dark」に書き換えます。

多くの皆々様方が知識をｼｪｱしてくださった御陰様で、

私は自分の「やりたいｺﾄ」を表現できました。

ありがとうございます。(❀ᴗ͈ˬᴗ͈)⁾⁾ᵖᵉᵏᵒ