忍者ブログ
RoboCup Junior Japan Rescue Kanto OB

             2005~2013
[1072]  [1071]  [1070]  [1069]  [1068]  [1067]  [1066]  [1065]  [1064]  [1063]  [1062
卒論はとりあえず出せたので後はパワポ。というか卒論関係ないラボの仕事自重してください。

今日はブログの方に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タグそのまま書くとタグで認識されてしまうので

タグ(<>←これ)については&lt;と&gt;にエスケープしないと事故るようです。

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

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




(^・ω・)ノ curonet at RadiumProduction
Comments
※コメントは内容確認後に手動で公開するようにしております。反映までしばらくお待ちください。
Your Name
Title
color
URL
Comment
 

カレンダー
06 2017/07 08
S M T W T F S
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 22
23 24 25 26 27 28 29
30 31
最新CM
[09/25 ONE RoboCuper]
[11/19 big]
[11/11 お馬さん]
[08/08 うまごやぐらし!]
[04/20 匿名(にさせてw]
かうんた
らじぷろ目次
らじぷろ検索機
プロフィール
HN:
Luz
年齢:
23
性別:
男性
誕生日:
1994/02/15
職業:
大学生
趣味:
ラボ畜
自己紹介:
初めまして。Luzと申します。
某大学の情報学科に入りました。のんびりと生活を送るのが今年の夢です。
めーる
radiumproduction☆yahoo.co.jp
※☆を@に変更して下さい。
バーコード

PR

忍者ブログ 2007-2017,Powered by Radium-Luz-Lα+-Rescatar in RadiumProduction [PR]


Related Posts Plugin for WordPress, Blogger...