以前 「seesaaブログはコードハイライトが使えない」と書きましたが、OSSのSyntaxHighlighterを導入すれば使えることがわかりました。
↓SyntaxHighlighter
http://alexgorbatchev.com/SyntaxHighlighter/
手順は上に記載されている通りなのですが、Seesaaブログ独自の部分を追記しておきます。
【前提条件】
- Seesaaブログ（2015/06/23時点）
- SyntaxHighlighter 3.0.83
【手順】
１：必要資材ダウンロード
1) 上記サイトのダウンロードページ(http://alexgorbatchev.com/SyntaxHighlighter/download/)から 資材一式をダウンロードし、ローカルに解凍しておく。
２：JS/CSSファイルアップロード
1) ブログ投稿画面の左メニュー「ファルマネージャ」→「アップロードオプションの表示」 ディレクトリ欄に「styles」→「追加」ボタン押す。同じ手順で「scripts」も追加。
2) 1:1)で解凍した資材の中にある「styles」フォルダ配下にあるファイルを、10個ずつ アップロード。この際、先にアップロードオプションの表示でディレクトリに「styles」 を選んでから、10個のファイルを選んでドラッグ＆ドロップすること。 また、一度アップロードが終わるとディレクトリ設定がリセットされる仕様なので、 そのアップロードの都度、「styles」を選び直してからアップロードすること。 3) まったく同様の手順で「scripts」配下にあるファイルもscriptディレクトリにアップロード。 こちらもアップロード先がリセットされることに注意！
３：テンプレート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)でつけた名前のほうにチェックが付いているか確認します。 ついてない場合はチェックします。
４：投稿記事中での使い方
投稿中の記事の中に、
・・・・
と記載すると、・・・・の部分が指定したシンタックスタイプでハイライトされます。 ここで指定できるシンタックスタイプは、さきほど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
５：その他の注意点
以上で設定は終わりなのですが、１点だけ重要な注意点があります。 このコードハイライターですが、Seesaaブログにおいては改行コードのとの 相性が悪いようで、投稿ページの「詳細設定」にある「改行HTMLタグ変換」を 「改行をbrタグに変換しない」に指定しておかないと正しく動きません。 （preで囲われた部分が１行になってしまう）
じゃあその設定を入れればいいじゃん、とは話が簡単にいきません。 上記の設定を入れると、記事の中の改行したい部分に必ずbrタグを 記載しなければならなくなるからです。。。 このあたり、設定などで逃げれないのかを追加で調べたいです。 誰か知っている方がいらっしゃったらぜひ教えてくださいm(_ _)m
【2015/06/24追記】
対処方法、わかりました！実際にこの方法でこの記事も
タグを外せました。 参考にさせていただいたのはこちらのブログ。 ↓改行が変!?自動改行するブログでのSyntaxHighlighterの表示崩れを回避する方法: 横浜ピアノ教室 福田音楽教室 Webサイト管理人のブログ http://kanrinin-fukuon.seesaa.net/article/406335798.html 対処方法はとっても簡単で、HTMLテンプレートのSyntaxHighlighter.all()を読んでいる箇所に あるコードを加えるだけです。
いやーヨカッタヨカッタ！！
