RadiumProduction

RoboCup Junior Japan Rescue Kanto OB

　　　　　　　　　　　　　2005～2013

[1072] [1071] [1070] [1069] [1068] [1067] [1066] [1065] [1064] [1063] [1062]

[PR]
　　2024/04/24 (Wed)

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

SyntaxHighlighterを入れてみる話
　　2016/01/30 (Sat)

卒論はとりあえず出せたので後はパワポ。というか卒論関係ないラボの仕事自重してください。

今日はブログの方にSyntaxHighlighterというものを導入してみました。

SyntaxHighlighterというのは何かというと、コレです↓

#python
import xxxxx
while 1:
    print "これ"

あっちこっちのブログでソース乗っけるときに使われているアレですね。

必要ないっちゃ必要ないのですが、今回、見栄えの関係で導入を決定しました。

という訳でインストールの方法をさらっと。

インストールといってもjsで書かれているのをアップデートするだけなので簡単です。

まずはダウンロードこちらのサイト↓が公式になるので Click here to download から落としてください。
http://alexgorbatchev.com/SyntaxHighlighter/download/

zipで落ちるのでまずは解凍。中にあるscriptファルダから

shCore.js
shBrush***.js←使いたい言語のやつ

をブログのファイルアップデートに投げます。

また、phpのようにhtmlタグを使っているソースを使う場合は

shBrushXml.js

もあると便利なのです。言語とファイルの対応はこちら

次にスタイルシート。コレも同様にstylesファルダから
shCore.css
shTheme***.css←使いたいスタイルシート

をアップデートします。emacs仕様とかeclips仕様もあるのね・・・
2016/2/4追記
2つファイルを上げなくてもshCore***.cssをUPするだけで動作するようになっているようです。
テーマの編集をしない場合はこっちのほうが作業少ないのでおすすめです。

次にブログに適用します。

ブログのhtmlを編集していきます。できるサービスとできないサービスが有るっぽい？

まず<head>タグ内にスクリプトとcssをincludeします。

<script type="text/javascript" src="ブログのファイル鯖アドレス/shCore.js"></script>
<script type="text/javascript" src="http://ブログのファイル鯖アドレス/shBrushXml.js"></script>
<script type="text/javascript" src="http://ブログのファイル鯖アドレス/shBrush***.js"></script>
<link rel="stylesheet" type="text/css" href="http://ブログのファイル鯖アドレス/shCore.css" />
<link rel="stylesheet" type="text/css" href="http://ブログのファイル鯖アドレス/shTheme***.css" />

***については、上で説明した通り、Xmlは他の言語のハイライトに影響するのでとりあえず上げておけばいいと思います。
多言語使うつもりがあるならBrushファイルは全部あげてもいいのではって一瞬思った(´・ω・｀)

次にhtmlの一段下に以下の行を追加します。ここでスクリプトを呼び出しています。

<script type="text/javascript">     
SyntaxHighlighter.all()
</script>

以上で設定は終了。あとは記事内の使いたい所にhtml編集で以下のように記述すればOK

<pre class="brush: python">
#python
import xxxxx
while 1:
    print "これ"
</pre>

また、preタグ内でもhtmlタグそのまま書くとタグで認識されてしまうので

タグ（<>←これ）については<と>にエスケープしないと事故るようです。

ブログサービスによっては編集中のプレビューでは表示されないこともあるようなので、

ここに関しては実際に投稿してみて確認するのをおすすめします。

（＾・ω・）ノ curonet at RadiumProduction

Program Comment(0)