黒猫🐈のゲーム🎮部屋🍵

2020年8月~ブログ開設しました。ゲーム🎮のプレイ日記を中心に、流行やプログラミング、お役立ち情報なども掲載したいと思います😉よろしくお願いします😁🐈✨

【はてなブログカスタマイズ】「Google Code Prettify」⚙️でソースコード🔧を表示する方法🖥😁✨

【はてなブログカスタマイズ】「Google Code Prettify」⚙️でソースコード🔧を表示する方法🖥😁✨

 

f:id:blackcat2020:20200925185955j:plain

「はてなブログ」でソースコード🔧を記述する際に、良いデザインのテンプレートが無いか、探していました🤔💦

調べてみると、「はてな記法モード」と「Markdownモード」で記述する事が可能だと分かりました。ただ、「見たままモード」から、切り替える必要がありました🤔💦

その為、「見たままモード」のままで、使える表示方法を探していると、「Googleのソースコードを表示するライブラリ」が見つかりました🤔

「Google Code Prettify」です😃⚙️✨

言語ごとの「色分け」や、「行番号」も自動で付き、「字下げ」にもそのまま対応しています😁✨スマホ表示の「レスポンシブ」にも対応しています📱😙また、デザインも「テーマ」から、何種類からか選べるようになっています。

 

 

 

 

「Google Code Prettify」⚙️の設定

①「Google Code Prettify」⚙️を読み込む。

「はてなブログ」の「デザイン」→ 設定→ 「ヘッダ」 → 「タイトル下」に、下記の<script> タグを記述して、「Google Code Prettify」の関連ファイルを読み込みます。

 

<script> <src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

 

これで、「Google Code Prettify」が使えるようになりました🤔💦

ソースコードを記述する書式は、下記となります。

これを、記事を書く時の「HTML編集」に貼り付けて記述して下さい😉🔧✨

<pre class="prettyprint lang-使用するソースコードの言語">

  //ここに、ソースコードを記述する。

</pre>

 

※記述する際は、後述する、④の「エスケープ文字」についても、参考にして下さい🤔💦

 

②「テーマ」🎨を選択する😙✨

「Google Code Prettify」には、何種類かデザインされた「テーマ」🎨が用意されています😊下のサイトに行って、好きなテーマを選びます。

jmblog.github.io

 

 下記の画面にある、「.cssボタン」をクリックして、出てきたコードをコピーします。

①と同じように、「デザイン」→ 設定→ 「ヘッダ」 → 「タイトル下」に、<style>タグで囲んでから、張り付けて保存します。

<style>

  //Google Code Prettifyのテーマからコピーしたcssのコード

</style>

 

Google Code Prettify

  

③CSSで、カスタマイズする方法

 ②で好きな「テーマ」を選びましたが、若干、cssでのカスタマイズが必要な事があります。私は、下記のサイト様を参考にさせて頂きました🤔💦ありがとうございます😊

www.webdesignleaves.com

 

・「行番号」を表示する

「行番号」を表示するには、下記の様に、ソースコードを記述する時の書式に、「linenums」を追加します🤔

<pre class="prettyprint lang-使用するソースコードの言語 linenums">

  //ここに、ソースコードを記述する。

</pre>

デフォルトでは5行ごとに表示されるため、 1行ごとに行番号を表示するには、 CSS で下記のように記述を追加します。

.prettyprint ol.linenums > li {

  list-style-type: decimal; 

  /* または */

  list-style-type: decimal-leading-zero;

}

 

・デザインをcssでカスタマイズする

②と同じように、「デザイン」→ 設定→ 「ヘッダ」 → 「タイトル下」に、<style>タグで囲んだ中に、張り付けて保存しました🤔💦

上記のサイト様の「CSS でスタイルのカスタマイズ」⚙️を参考にして、必要な個所を記述します。背景や文字色、フォントなどを、色々と調整出来ます☺️

.prettyprint ol.linenums > li {

  list-style-type: decimal; /* 1行ごとに行番号を表示 */ 

  border-left:solid 1px #EBB15E; /* 区切り線を表示  */

  padding-left:0.5rem; /* 間隔の調整(必要であれば) */

}

 

④記述する際は、「エスケープ文字」を使用しよう。

ソースコードを記述する際は、括弧<>などを、「エスケープ文字」で書く必要があります🤔💦 「<>」の場合は、「&lt;」と「/&gt;」で表すことが出来ます。

「</script>」の場合は、 「&lt;/script&gt;」となります。

 

 

CSSの設定で、参考になったサイト

 cssのタグ辞典です。テーマのデザインを調整する時に、参考になるかと思います😌

www.tagindex.com

 色の見本です。cssで調整する時に、色の見本とカラーコードがたくさん載っています。色の検索も可能です😉🎨✨

www.colordic.org

 今回は、下記のサイト様を参考にさせて頂きました😉🖥✨

とても役に立ちました。ありがとうございました😌✨🔧

mae.chab.in

 

 

持っている本で、良かった本 

辞典ですが、最近のデザイン🎨で、分かりやすい本となっていて、調べやすかったです😉✨

HTML5 & CSS3 デザインレシピ集

HTML5 & CSS3 デザインレシピ集

  • 作者:狩野 祐東
  • 発売日: 2017/02/22
  • メディア: 単行本(ソフトカバー)
 

 

この本は、評価が高いレビューが、ユーザから沢山ついてるなと思ったので、買いました🤔最近のレスポンシブなデザイン🎨にも対応していて、良かったなと思います😌✨