2015年6月2日火曜日

Bloggerでsyntaxhighlighter表示してみた

  1. syntaxhighlighter version 3.0.83をdownload
  2. 落としてきたzipを解凍する
  3. 必要なcss(stylesフォルダ内の最低1つ以上)
  4. 必要なjs(scriptsフォルダ内)
    • shCore.js(必須)
    • shAutoloader.js(任意だが今回の例では必要)
    • shBrushJScript.js(任意) 他にもcss php sql vb perl delphiと色々あるが必要分だけでok
  5. cssとjsをGoogleDriveにUpload
    (他にもupload先はGoogle Apps Site等でも可能そうですがとりあえず)
  6. uploadしたファイルを共有します(オン・ウェブ上で一般公開)

Bloggerのテンプレートをhtmlで編集します。
    <head>の上部に記載(他のCSSより上)
<head>



</head>
    </body>の直前に記載

</body>
Bloggerのテンプレート保存をします
これでとりあえず完了です
あとは以下のようにhtmlコードを投稿してみます
<pre class="brush:html;" title="htmlサンプル">
<head>
<title>ほげほげ</title>
</head>
<body>

</body>
</pre>
classの値をbrush:js とすればJavaScriptでの表示になります
あとはuploadしたcssを細かく調整していくのみです
これが大変でした。。

0 件のコメント: