SyntaxHighlighterできたよ！！

こんにちは。

今日は3つ目の記事更新です。

今回は、我らがgooブログでSyntaxHightliter (CDN版のJavascriptライブラリ)の試験です。

とりあえず、PC版で試してみました。

SyntaxHighlighterを使うには、JavascriptとCSSが必要不可欠です。

JavascriptとCSSを使うためには、カスタムテンプレートでないと駄目で、今まで使っていたテンプレートだと、レイアウト変更しかできなかったため、やむなく、適当なカスタムテンプレートを使いました。

基調はやはりブラックにしました。

まずは、編集画面から、テンプレート設定をクリックします。

次に適当なテンプレートを選択します。カスタムから選んでください。

後は、HTML編集画面で、cdnjsのサイトで好みの言語タイプを探してJavascriptとCSSのリンクを記述及びJavascriptの若干のコードを書いてから変更を保存します。

ただし、shCore.js(shCore.min.js)とshCore.css(shCore.css)は必須のようです。

以下のようになります。

CSS部分（抜粋） 

修正前

<link rel="stylesheet" type="text/css" charset="UTF-8" href="<{$css}>" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="<{$rss_url}>" />

修正後（とりあえず、デフォルトだけ入れました）

<link rel="stylesheet" type="text/css" charset="UTF-8" href="<{$css}>" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="<{$rss_url}>" />

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.min.css" />

Javascript部分（抜粋） 

修正前

<{$cjava}>

修正後（とりあえず、C言語用を入れました）

<{$cjava}>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCpp.min.js"></script>
</script>
<script type="text/javascript">
    SyntaxHighlighter.all(); // ここが重要です！！
</script>

で後は、HTMLのコードを書いて終了です。

以下はC言語のコードサンプルです。

#include 
#include 
int main(void) {
    printf("Hello world!
");
}

出力結果

#include 
#include 
int main(void) {
    printf("Hello world!
");
}

Brush nameについてはいずれまとめようと思いますが、手っ取り早くは、

jsファイルのe.aliasesの配列の名前を使えば問題ないかと思います。

Brush nameについて簡単にまとめました。（2020/9/30更新）

ということで、gooブログでもSyntaxHightlighterが使えました！！＼(^o^)／

知ってました？よね。