簡単で重くない方法としてgoogle-code-prettifyを選びました。
使い方は3ステップです。
1.headerに以下の1行を追加
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert'/>
CDN(Content Delivery Network)方式で読み込む方法で、CSSも1行で読み込みます。
skin=desertの部分でテーマを指定しています。次のギャラリーから選び変更可能です。
Gallery of themes for code prettify
Bloggerのheaderの設定は「テーマ」の「HTML修正」でheadタグ内に追加します。
2.CSSを追加
以下のCSSは全行に行番号を表示し、行番号の横にセパレータを表示します。また、1行が長い場合に横スクロールを表示します。テーマはdesertに対してCSSで変更しています。
pre.prettyprint { border: 1px solid #cccccc !important; line-height: 1.5em; overflow: auto; padding: 2em !important; } pre.prettyprint > ol.linenums { padding-left: 2em; } pre.prettyprint > ol.linenums > li { border-left: 1px solid #cccccc; margin-bottom: 0; } pre.prettyprint > ol.linenums > li.L0, pre.prettyprint > ol.linenums > li.L1, pre.prettyprint > ol.linenums > li.L2, pre.prettyprint > ol.linenums > li.L3, pre.prettyprint > ol.linenums > li.L4, pre.prettyprint > ol.linenums > li.L5, pre.prettyprint > ol.linenums > li.L6, pre.prettyprint > ol.linenums > li.L7, pre.prettyprint > ol.linenums > li.L8, pre.prettyprint > ol.linenums > li.L9 { list-style-type: decimal; } pre.prettyprint > ol.linenums > li span:first-child { padding-left: 1em; } pre.prettyprint > ol.linenums > li span:last-child { padding-right: 1em; }
bloggerでは、「テーマ」の「カスタマイズ」からデータデザイナーを開き、
「上級者向け」の「CSSを追加」から「カスタムCSSを追加」の領域に上記のCSSの内容を貼り付け追加します。
3.記事を作成する際にHTMLモードで、Preタグにクラス名「prettyprint linenums」を指定して書きます。
<pre class="prettyprint linenums”> ここにコードを書く </pre>
linenumsは行番号を表示するクラス属性です。
この記事は、ご紹介した方法でソースコードを埋め込んでいます。
0 件のコメント:
コメントを投稿