HTMLコードをgoogleblogger記事に載せる方法

前からあまり気にしてなかったので放置気味だったのですが、今回一つ前の記事にてhtmlがスマホ表記だと何故か外部リンクのアイコンがついてしまったりと、見栄えの問題というよりかは、機能的にやりにくいので、重い腰を上げてコードを綺麗に掲載する方法を覚え書きとしておきます。

まずテーマ⇒編集でファイルを開いて、HTMLの</head>の前に次の内容を追加します。Google-code-prettifyには、5種類のスキンが用意されています。Gallery of themes for code prettifyで好みのスキンを選んで、「skin=」で指定します。たとえば、「sunburst」というスキンを設定する場合は、このように記述します。

<!-- Google-code-prettifyを追加 --> 
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst"/> 
<!-- /Google-code-prettify -->

上記の形にするには、html編集モードにしてから、コードを<pre class="prettyprint linenums" style="overflow: auto; word-wrap: normal;"> 間に挟んで囲んであげる </pre>で囲ってあげる必要があります。

まずhttps://so-zou.jp/web-app/text/encode-decode/を訪れて、上記の<pre></pre>タグ以外のhtmlコードを変換してエンコード化するようです。一番上の変換対象のテキストにコピペして変換をクリックして、一番上から二番目のHTMLエンコード(文字実体参照)をコピーして、ブログ記事のhtml編集モードにて貼り付けて、そして最後にそのコードを<pre></pre>タグで囲ってあげます。

いつもふじやんさんがメールにて何でも教えてくださいますので、とても感謝しています。今回はこちらも引用させていただきました。