Bloggerにソースコードを埋め込む方法として、
Google-code-prettify
を使う方法があります。
Bloggerの、
テーマ→カスタマイズ→HTMLを編集
を選択してください。
そして、<head>と</head>の間(例えば</head>の前)に
以下のコードを追加してください。
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian' type='text/javascript'/></head>を数千行あるコードの中から探すのは大変に思えますが、
「Ctrl + F」を押すと、簡単に探し出せます。
左上に、「search: 」とでるので、そこに「</head>」を入れて
「Enter」を押せば見つかります。
ここまでで、準備は終わりました。
使い方
まず、HTMLビューにします。そこにコードを書きます。
そして、コードを<pre class="prettyprint"></pre>ではさみます。
<pre class="prettyprint”>
ここにコードを書く
</pre>メジャーな言語は、下記のようにclassに追加指定することで、
何の言語のコードなのか自動で判別してくれます。
<pre class="prettyprint lang=python”>
pythonのコードを書く
</pre>行番号を表示するときは、以下のようにlinenumsを付加します。
<pre class="prettyprint lang=python linenums">横スクロールバーを付けるには、以下のように
style="overflow:auto; overflow-y:hidden;"を指定します。
<pre class="prettyprint linenums" style="overflow:auto; overflow-y:hidden;">実践例
例えば以下のようにHTMLビューに打ち込むと、
<pre class="prettyprint lang=python linenums" style="overflow:auto; overflow-y:hidden;">
def test_hello_world():
str = "Hello World"
print(str)
test_hello_world()
</pre>こんな風に表示されます。
HTMLのタグがある場合
「<」や「>」は次のようなHTML特殊文字と呼ばれるものに変換してやる必要があります。
毎回タグを特殊文字に変換するのは大変ですから、以下のサイトのツールを使用して変換してもらいましょう。
0 件のコメント:
コメントを投稿