2020年12月3日木曜日

Google Code-Prettifyでシンタックスハイライトを実装する(Bloggerにソースコードを見栄えよく載せる)

プライベートで色々とあり、投稿が滞ってしまいました。これからもボチボチと投稿します。 

私もBloggerにソースコードを載せの機会が多いのですが、今までコードをベタ書きしていて、他の方のように見栄えが良くありませんでした。

そこで軽量で簡単に導入できるらしいGoogle Code-Prettifyを使ってみました。Google Code-Prettifyの解説・設定方法は既に多くの方がブログで紹介されているので、私が苦労したところをメモしておきます。

Google Code-Prettifyの設定は簡単で、BloggerのHTMLの<head>部分に

<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian'/>

を追加するだけですが、そのHTMLの編集が何処で行えるのか探すのに苦労したのでメモしておきます。

【手順】

1.ブログメニューのテーマを開く


2.カスタマイズ右の▼プルダウンメニューを開きHTMLを編集を開くと、HTMLが表示されるので<head>の下に、上記スクリプトを追加する。











3.後は投稿編集画面でソースコードを載せたい場面で、HTMLモードで

<pre class="prettyprint">

</pre>

の間にソースコードを書き加えればOK











0 件のコメント:

コメントを投稿