« OS Xの標準機能で他OS向けZIPをつくる | トップページ | 嫁と格安SIM − mineoの場合 − (その5) »

2016.02.23

ココログフリーでSyntaxHighlighter 3.0.83を使う

これまで、ブログにソースコードを書くときにあまり見た目を気にしていなかったのですが、ココログフリーでもSyntaxHighlighterを使えるようですので、試してみました。

参考にした主なサイトは次のとおり。ありがとうございます。
SyntaxHighlighter
ココログでソースコードをかっこよく表示する: よしなしごと
Blogger:SyntaxHighlighter(1)ブログにソースコードを綺麗に表示させる: P--Q及びこのシリーズ記事

1.SyntaxHighlighter 3.0.83をダウンロードします。
2.ダウンロードしたファイルを展開し、必要なファイルをココログにアップロードします。
[コントロールパネル]→[ファイル]でホーム配下にSH3StylesとSH3Scriptsというフォルダを作り、必要なファイルをアップロードします。(SH3SytlesとSH3Scriptsのフォルダ名は任意で良いようです)

SH3Styles配下
shCoreDefault.css(shCore.css + shThemeDefalt.cssと同等らしい)

SH3Scripts配下
shCore.js
shAutoloader.js
の2つが必須。後は適宜必要なファイルを追加。
Bundle Brushesをご参照下さい。

3.マイリストに次のコードを追加。
shAutoloader.jsを使うことで、必要なJavaScriptコードのみ読み込むことができます。そのため、このコードを本文より</body>の近くに追加します。
当サイトの場合、SNSボタンをマイリストに記述していますので(ココログフリーにSNSボタンを設置してみた)、SNSボタンの直前にコード追加しています。


<!--SyntaxHighlighter 3.0.83-->
<link href="/SH3Styles/shCoreDefault.css" rel="stylesheet" type="text/css" />
<script src="/SH3Scripts/shCore.js" type="text/javascript"></script>
<script src="/SH3Scripts/shAutoloader.js" type="text/javascript"></script>
<script src="/SH3Scripts/shBrushXml.js" type="text/javascript"></script>
<script type="text/javascript">
SyntaxHighlighter.config.stripBrs = true;
SyntaxHighlighter.defaults['auto-links'] = false;
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.config.bloggerMode = false;
SyntaxHighlighter.autoloader (
"bash shell /SH3Scripts/shBrushBash.js",
"cpp c /SH3Scripts/shBrushCpp.js",
"css /SH3Scripts/shBrushCss.js",
"java /SH3Scripts/shBrushJava.js",
"js jscript javascript /SH3Scripts/shBrushJScript.js",
"perl pl /SH3Scripts/shBrushPerl.js",
"php /SH3Scripts/shBrushPhp.js",
"plain text /SH3Scripts/shBrushPlain.js",
"ps powershell /SH3Scripts/shBrushPowerShell.js",
"py python /SH3Scripts/shBrushPython.js",
"rails ror sh /SH3Scripts/shBrushRuby.js",
"sql /SH3Scripts/shBrushSql.js",
"vb vbnet /SH3Scripts/shBrushVb.js"
);
SyntaxHighlighter.all();
</script>

SyntaxHighlighter.config.stripBrs = true; は、<br />を無視します。
SyntaxHighlighter.defaults['auto-links'] = false; は、自動リンクを無効にします。
SyntaxHighlighter.defaults['toolbar'] = false; は、ツールバーを無効にします。
SyntaxHighlighter.config.bloggerMode = false; は、Bloggerモードを無効にします。

例えば、


<pre class="brush: js">
/**
* SyntaxHighlighter
*/
function foo()
{
if (counter <= 10)
return;
// it works!
}
</pre>

と書くと、

/**
* SyntaxHighlighter
*/
function foo()
{
if (counter <= 10)
return;
// it works!
}

となりますが、

<pre class="brush: js; gutter: false">
/**
* SyntaxHighlighter
*/
function foo()
{
if (counter <= 10)
return;
// it works!
}
</pre>

と書くと、

/**
* SyntaxHighlighter
*/
function foo()
{
if (counter <= 10)
return;
// it works!
}

と、行番号がなくなります。

こんな風に、


<pre class="brush: js; first-line: 10; highlight: [12, 14]">
/**
* SyntaxHighlighter
*/
function foo()
{
if (counter <= 10)
return;
// it works!
}
</pre>

と書くと、

/**
* SyntaxHighlighter
*/
function foo()
{
if (counter <= 10)
return;
// it works!
}

のように、行番号が10から始まり、12行目と14行目がハイライトされます。
このように、ココログフリーでもコードをハイライト表示可能とすることができます。

最後に、上のマイリストに追記したコードのSyntaxHighlighter表現を実現するための記述は、次のとおり。


<pre class="brush: js; html-script: true">
<!--SyntaxHighlighter 3.0.83-->
<link href="/SH3Styles/shCoreDefault.css" rel="stylesheet" type="text/css" />
<script src="/SH3Scripts/shCore.js" type="text/javascript"></script>
<script src="/SH3Scripts/shAutoloader.js" type="text/javascript"></script>
<script src="/SH3Scripts/shBrushXml.js" type="text/javascript"></script>
<script type="text/javascript">
SyntaxHighlighter.config.stripBrs = true;
SyntaxHighlighter.defaults['auto-links'] = false;
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.config.bloggerMode = false;
SyntaxHighlighter.autoloader (
"bash shell /SH3Scripts/shBrushBash.js",
"cpp c /SH3Scripts/shBrushCpp.js",
"css /SH3Scripts/shBrushCss.js",
"java /SH3Scripts/shBrushJava.js",
"js jscript javascript /SH3Scripts/shBrushJScript.js",
"perl pl /SH3Scripts/shBrushPerl.js",
"php /SH3Scripts/shBrushPhp.js",
"plain text /SH3Scripts/shBrushPlain.js",
"ps powershell /SH3Scripts/shBrushPowerShell.js",
"py python /SH3Scripts/shBrushPython.js",
"rails ror sh /SH3Scripts/shBrushRuby.js",
"sql /SH3Scripts/shBrushSql.js",
"vb vbnet /SH3Scripts/shBrushVb.js"
);
SyntaxHighlighter.all();
</script>
</pre>

html-scriptをtrueに設定することで、JavaScriptとHTMLの設定を同時に有効にできます。
以上です。

|

« OS Xの標準機能で他OS向けZIPをつくる | トップページ | 嫁と格安SIM − mineoの場合 − (その5) »

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1024423/64079557

この記事へのトラックバック一覧です: ココログフリーでSyntaxHighlighter 3.0.83を使う:

« OS Xの標準機能で他OS向けZIPをつくる | トップページ | 嫁と格安SIM − mineoの場合 − (その5) »