ココログフリーで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の設定を同時に有効にできます。
以上です。
| 固定リンク
「パソコン・インターネット」カテゴリの記事
- 旧いPCをWindows 11にアップデートしてみた(ThinkPad E440)(2025.06.03)
- 実家のAmazon Echo Show 5に別アカウントのAmazon Alexaアプリから呼びかけするためのAlexaアプリによる設定(2025.01.02)
- Intel Mac で ELYZA-japanese-Llama-2-13b 及び phi-2 とllama.cppで戯れてみた(2024.01.14)
- 分離型キーボードで親指シフト(NICOLA配列)を試す(Majestouch Xacro M10SP JIS配列)(2024.01.06)
- Microsoft Office Word のショートカットキーの一部をEmacs風のキーバインドにしてみた(2023.12.18)
コメント