ソネットブログにソースコードを貼る方法

ソネットブログにソースコードを貼るには二つの方法があります。

方法１： Syntax Highlighter を使う方法　
http://alexgorbatchev.com/SyntaxHighlighter/

方法２： google-code-prettify を使う方法　
https://code.google.com/p/google-code-prettify/

Syntax Highlighter のほうがPCの見栄えはいいですが、スマホで表示が崩れる場合があります。(このサンプルは問題ないですね。。。)


// test
#include &ltcstdio>

int main() {
    printf("Hello World\n");
}

google-code-pretiffy は地味ですが、スマホでもそれなりに見えます。こんな感じ。


// test
#include &ltcstdio>

int main() {
    print("Hello World\n");
}

これらの設定は、So-netブログ管理ページのテンプレート管理でできます。

上級者向けと書いてありますが、勇気をもって「HTMLの追加」を押します。

スクリプトは&lthead>タグ内に配置します。検索で</head>を探して、その前にそれぞれのスクリプトを配置します。

</head>の前に Syntax Highlighter のスクリプトを追加します。追加したスクリプトの詳細はこちらを参照ください。

さらにgoogle-code-prettify を追加します。google-code-prettify の場合は、&ltbody> に onload="prettyPrint()" を追加します。追加したスクリプトの詳細はこちらを参照ください。

これで名前をつけて保存して終了です。ちなみにサンプルはHTMLで下記のように記述しています。

Syntax Highlighter


&ltpre class="brush: c;">
// test
#include &ampltcstdio&ampgt

int main() {
    printf("Hello World\n");
}
</pre>

google-code-prettify


&ltpre class="prettyprint">
// test
#include &ampltcstdio&ampgt

int main() {
    printf("Hello World\n");
}
</pre>

これからは、じゃんじゃんソースコードを貼っていきたいと思いますー。
（＾_＾）／～

関連記事
ブログにソースコードをどう貼るか悩む。。。パート２！
http://makers-with-myson.blog.so-net.ne.jp/2014-10-28

ブログにソースコードをどう貼るか悩む。。。
http://makers-with-myson.blog.so-net.ne.jp/2014-10-27

HTML+JavaScriptによるプログラミング入門

作者: 古金谷博
出版社/メーカー: 日経BP社
発売日: 2014/08/06
メディア: 単行本

作りながら覚えるHTML5+JavaScriptプログラミング

作者: 松岡宣
出版社/メーカー: ソフトバンククリエイティブ
発売日: 2013/04/18
メディア: 大型本

ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング (NextPublishing)

作者: 田中賢一郎
出版社/メーカー: インプレスR&D
発売日: 2013/10/25
メディア: オンデマンド (ペーパーバック)

ソネットブログにソースコードを貼る方法

関連する記事