Gumma_de_Sharoushiのブログ

群馬で社労士として開業をめざします。→開業しました。

はてなブログでコードをハイライトつきで貼り付けるには【HTML】

はてなブログEclipseAndroid Studioで作成したプログラミングのコードを、シンタックスハイライトつきで貼り付ける方法をやっと見つけました。

preタグcodeタグでくくる

Eclipseなどの統合開発環境でまずコードをコピーします。

Eclipseでコードをコピー

Eclipseでコードをコピー



はてなに貼り付けたら、HTML編集モードに行き、<pre><code> ~ </code></pre>でくくってください。

HTML編集画面でタグでくくる

HTML編集画面でタグでくくる



preタグは、スペースやタブなどをそのまま残してくれます。

 

preタグでくくらないと、HTMLにインデントを喰われてしまいます。

 

codeタグはまさにプログラムのソースコードのためのタグです。

 

このタグでくくってあると、ブラウザがこの部分がコードだと認識してくれます。

 

cssを埋め込む

preタグにcssを設定します。

 

はてなの場合、このcssを埋め込む場所が分かりづらくて、だいぶ探しました。

 

ここです。

はてなの管理画面からデザインを選ぶ

はてなの管理画面からデザインを選ぶ



cssを編集できるところ

cssを編集できるところ

CSSは、今回は次のようにしてみました。

 

pre {
  margin: 1em 0;
  padding: 1em;
  border-radius: 5px;
  background: #25292f;
  color: #fff;
  overflow-x: auto; 
  -webkit-overflow-scrolling: touch; 
}

 

↓こちらのサイトを参考にいたしました。

code-kitchen.dev

 

 

シンタックスハイライトつきにする

シンタックスハイライトは、ライブラリを利用します。

 

はてなでリンクを貼る箇所はここです。

f:id:Gumma_de_Sharoushi:20220317101201p:plain

デザインからヘッダを選ぶ

 

f:id:Gumma_de_Sharoushi:20220317101458p:plain

タイトル下にコードを貼り付ける

今回貼り付けたのは以下のコードです。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/dracula.min.css">

 

先ほど紹介したこちらのサイト↓

codeタグ:コードを表す | HTMLリファレンス

にあったものです。

 

スクリプトはてなでは「デザイン」の「記事」の中の「記事下」に貼り付けます。

f:id:Gumma_de_Sharoushi:20220317101948p:plain

デザイン→記事

f:id:Gumma_de_Sharoushi:20220317102136p:plain

記事下の欄にコードを貼り付けたところ

貼り付けたコードはこれです。

<!-- JSファイルの読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
<script>
  // ハイライトを実行
  hljs.initHighlightingOnLoad();
</script>

 

これも

codeタグ:コードを表す | HTMLリファレンス

にあったものを参考にしました。

 

最後に、変更を保存します。

 

以上です。