スキップしてメイン コンテンツに移動

Bloggerにソースコードを埋め込む方法

Googleのcode-prettifyを使用してBlogger上でソースコードをいい感じに表示させる。

参考：googlearchive/code-prettify

テーマのHTML編集

<head>内に下記を追加する。

<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst'/>
<style type="text/css">
  pre.prettyprint {
    word-wrap: normal;
    overflow-x: auto;
    white-space: pre;
  }
</style>
styleの設定はスクロールバーを表示させるためのもの。

記事作成

下記のように<pre>タグでソースコードを囲む。

<pre class="prettyprint">print("Hello world.")</pre>

すると下記にように表示される。

print("Hello world.")


ラベル:

コメント

コメントを投稿