ブログにソースコードを掲載する方法 （２/２）

前回からの続きで、実際にブログに張り付ける方法です。

１．貼り付けるソースを”＜ pre class="brush: 言語; " ＞”と”＜ /pre ＞”で挟みます。
　　言語は、ｃとかjavaとかまさにソース言語です。

＜pre class="brush: c; "＞

void main() {

              printf("Hello world!\n");

}

＜/pre＞

　ソース上に”＜”、”＞”、”＆”を含んで入る場合は、”＜script class="brush: 言語" 　　type="syntaxhighlighter"＞＜![CDATA[”と”]]＞＜/script＞”で挟みます。

言語は、phpとかhtmlのようになると思います。

＜script class="brush: php" type="syntaxhighlighter"＞＜![CDATA[

       ＜h1＞Sample　Source＜/h1＞
　　　　＜?php echo "HELLO PHP!"; ?＞

]]＞＜/script＞

【注意】上の例では”＜＞”を全角にしてあります。コピーして使用する場合は、注意してください。


２．上記の手順で事前に貼り付けるソースを用意しておきます。（任意ですが）
３．記事の中に【ここに張り付け】といった目印を書いておきます。

４．編集モードを”作成”から”HTML”に変更します。

５．HTML表示の【ここに張り付け】に掲載したいソースをコピーします。

６．プレビュー等で結果を確認してください。うまくいったでしょうか？

　　見栄えを良くするオプションもいろいろあるので、試してみてください。

　　（オプションの参考：「SyntaxHighlighterの使い方編」）

void main() {
 printf("Hello world!\n");
}

ブログにソースコードを掲載する方法（１/２）

Bloggerにサンプルソースを載せる方法について調べてみた。

 手順として

 １．Syntax Highlighter Scripts Generatorからスクリプトを生成する。
　　　「Select Brushes」は、複数指定が可能です。

２．できあがったスクリプトを画面上で右クリックしてコピーをします。
　　「Copy To ClipBoard」をクリックしてもコピーされなかった。

３．Bloggerダッシュボードから「レイアウト」→「ガジェットを追加」をクリックします。

４．追加するガジェットの一覧画面からHTML/JavaScriptをクリックします。

５．タイトルに適当な名前をつけて、コンテンツに２．でコピーした内容を貼り付けます。

　　最後に保存をクリックして完了です。

６．では、試してみましょう。

できた！
実際に張り付けるまでの手順の詳細については次回報告します。