電磁波に撃たれて眠りたい!

今日も電磁波浴びまくりのIT業界で働く@mamohacyがガジェット/クラウド/IT業界を語ってくブログ

Seesaaブログでコードハイライトを有効にする方法

以前 「seesaaブログはコードハイライトが使えない」と書きましたが、OSSのSyntaxHighlighterを導入すれば使えることがわかりました。

 

↓SyntaxHighlighter
http://alexgorbatchev.com/SyntaxHighlighter/

 

手順は上に記載されている通りなのですが、Seesaaブログ独自の部分を追記しておきます。

 

 

【前提条件】

  • Seesaaブログ(2015/06/23時点)
  • SyntaxHighlighter 3.0.83

 

【手順】

1:必要資材ダウンロード

1) 上記サイトのダウンロードページ(http://alexgorbatchev.com/SyntaxHighlighter/download/)から  資材一式をダウンロードし、ローカルに解凍しておく。

 

2:JS/CSSファイルアップロード

1) ブログ投稿画面の左メニュー「ファルマネージャ」→「アップロードオプションの表示」  ディレクトリ欄に「styles」→「追加」ボタン押す。同じ手順で「scripts」も追加。

2) 1:1)で解凍した資材の中にある「styles」フォルダ配下にあるファイルを、10個ずつ  アップロード。この際、先にアップロードオプションの表示でディレクトリに「styles」  を選んでから、10個のファイルを選んでドラッグ&ドロップすること。  また、一度アップロードが終わるとディレクトリ設定がリセットされる仕様なので、  そのアップロードの都度、「styles」を選び直してからアップロードすること。 3) まったく同様の手順で「scripts」配下にあるファイルもscriptディレクトリにアップロード。  こちらもアップロード先がリセットされることに注意!

3:テンプレートHTMLの編集

Seesaaブログではブログ投稿時に使われるHTMLファイルをカスタマイズできるらしいので、 ここに上記のJavaScript/CSSファイルをインクルードするように設定を入れます。

1) ブログ投稿画面の左メニュー「デザイン」 →画面中段「HTML」をクリック

2) 画面右端「HTMLの追加」を押す

3) <head> 〜 </head>の間に下記のようなHTMLコードを埋め込みます。  おすすめは</head>の直前です。

・・・・・
<head>
・・・・・・・
・・・・・・・


 




  

</head> ・・・・・・・・ ・・・・・

選択できるシンタックス(js)のリスト → http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ 選択できるテーマ(css)のリスト → http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/

4) この状態で「HTML名」に適当な名前をつけて「保存」ボタンを押す 5) 「設定を完了しました」というメッセージが表示されるので、ここで画面中段の  「HTML」をクリックしてHTMLテンプレート一覧を表示させ、「適用」の  ラジオボタンが4)でつけた名前のほうにチェックが付いているか確認します。  ついてない場合はチェックします。

4:投稿記事中での使い方

投稿中の記事の中に、

・・・・

と記載すると、・・・・の部分が指定したシンタックスタイプでハイライトされます。 ここで指定できるシンタックスタイプは、さきほどHTMLテンプレートの編集でインポート したシンタックスのみで、指定する文字列は、先のシンタックスリストページに 表示されている「Brush aliases」のところに記載されている文字のみとなります。 http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ たとえば下記のように記載すれば、

<pre class="brush: bash">
mamomacy$ ls -al
total 24
drwxr-xr-x   4 mamohacy  staff   136  6 17 11:43 .
drwxr-xr-x+ 39 mamohacy  staff  1326  6 17 20:36 ..
-rw-r--r--@  1 mamohacy  staff  8196  6 17 20:34 .DS_Store
drwxr-xr-x   6 mamohacy  staff   204  6 17 20:41 ansible-test
</pre>

↓のように表示されます。

mamomacy$ ls -al
total 24
drwxr-xr-x   4 mamohacy  staff   136  6 17 11:43 .
drwxr-xr-x+ 39 mamohacy  staff  1326  6 17 20:36 ..
-rw-r--r--@  1 mamohacy  staff  8196  6 17 20:34 .DS_Store
drwxr-xr-x   6 mamohacy  staff   204  6 17 20:41 ansible-test

5:その他の注意点

以上で設定は終わりなのですが、1点だけ重要な注意点があります。 このコードハイライターですが、Seesaaブログにおいては改行コードのとの 相性が悪いようで、投稿ページの「詳細設定」にある「改行HTMLタグ変換」を 「改行をbrタグに変換しない」に指定しておかないと正しく動きません。 (preで囲われた部分が1行になってしまう)

じゃあその設定を入れればいいじゃん、とは話が簡単にいきません。 上記の設定を入れると、記事の中の改行したい部分に必ずbrタグを 記載しなければならなくなるからです。。。 このあたり、設定などで逃げれないのかを追加で調べたいです。 誰か知っている方がいらっしゃったらぜひ教えてくださいm(_ _)m

 

【2015/06/24追記】

対処方法、わかりました!実際にこの方法でこの記事も
タグを外せました。 参考にさせていただいたのはこちらのブログ。 ↓改行が変!?自動改行するブログでのSyntaxHighlighterの表示崩れを回避する方法: 横浜ピアノ教室 福田音楽教室 Webサイト管理人のブログ http://kanrinin-fukuon.seesaa.net/article/406335798.html 対処方法はとっても簡単で、HTMLテンプレートのSyntaxHighlighter.all()を読んでいる箇所に あるコードを加えるだけです。


いやーヨカッタヨカッタ!!