最終更新:2015/07/23 17:55:54 JST

現在位置:ホーム(1)その他(6)備忘録>Syntaxhighlighter関連Tips

Syntaxhighlighter関連Tips

webでいろいろなアプリケーションのソースファイルを公開することも多くなってきました.私のところのサイトでもhtml,TeX,R,Processingなどけっこう増えてきました.通常は<pre>と</pre>で囲って終わりでしたが,見栄えが今ひとつでした.そこで見つけたのが"Syntaxhighlighter"というJavascriptとcssを利用したソースファイルの表示です.すでに私のところでも利用させてもらっていますが,設定ファイルや標準で添付されていない言語のスクリプトの入手先など忘れないうちに記録しておきます.

[*]下へこのページのボトムへ▼ ▲[#]上へこのページのトップへ

Syntaxhighlighterの入手とインストール

Google先生にお尋ねすればお答えくださいます… ではあかんやろうと思いますので,簡単なメモを.Syntaxhighlighterは次のサイトからダウンロード可能です.現在のバージョンは3.0.83(2014/07/31現在)です.zipファイルがダウンロードされますので,適当なところで展開します.

zipファイルを展開するといくつかのフォルダが現れますが,webサーバに転送してやる必要のある重要なファイルが入っているフォルダは次の2つです.

  1. scripts:shBuurushXXX.jsという言語ごとのjavascriptが入っているフォルダ
  2. styles:ブラウザで表示する際のcssが入っているフォルダ

やってやる必要のある作業は次のようになります.

  1. 上記の2つのフォルダを自分のWebサーバにftpで転送(一度だけでOK)
  2. Syntaxhighlighterを使いたいソースのヘッダ部分にjavascriptとcssのパスを指定(ファイル単位で必要)
  3. <pre>にソースファイルの種類を指定(<pre>単位で必要)

ftpでの転送は問題ないと思いますので割愛して,パスの指定は次のようになります.最上位に"syntaxhighlighter_3.0.83"というフォルダを作って,その下にそれぞれ"scripts"と"styles"というフォルダを配置した場合の指定例です.他のタグは省略してあります(念のため).

<head>
	<link type="text/css" rel="stylesheet" href="../syntaxhighlighter_3.0.83/styles/shCore.css"/>
	<link type="text/css" rel="stylesheet" href="../syntaxhighlighter_3.0.83/styles/shThemeDefault.css"/>
	
	
	
	
	
	
	
	
	
	
</head>

上の例からもお分かりかと思いますが,展開した全部のファイルが必要な訳ではなく,自分が必要なものだけを転送してやればよいわけです.実際にソースファイルとして装飾したいときには<pre>タグに"class"として言語名を指定してやります.例えば上のhtmlの場合だと"brush:html"のように指定します.

<pre class="brush:html toolbar:false">
<head>
	<link type="text/css" rel="stylesheet" href="../syntaxhighlighter_3.0.83/styles/shCore.css"/>
	<link type="text/css" rel="stylesheet" href="../syntaxhighlighter_3.0.83/styles/shThemeDefault.css"/>
	…
</pre>

言語の指定方法は参考にさせていただいたサイトにわかりやすい解説がありますので,そちらをご覧ください.

実は標準のshCore.cssとshThemeDefault.cssを少しだけ修正しています(ナショナルカラーの黄色と黒と灰色にするため).

shCore.cssはiOSのsafariでの表示の関連で修正をしています.

.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  font-size: 1em !important;
  -webkit-text-size-adjust: 100%; /* iOS safariへの対応のため追加 */
}

shThemeDefault.cssは1行ごとに背景色を変化させるのと行番号との区切り線の色を変えるために修正を行っています.

.syntaxhighlighter span {
    line-height: 1.2em !important; /*行間調整*/
}

.syntaxhighlighter .line.alt2 {
  background-color: #ffffe0 !important;
}
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
  background-color: #e0e0e0 !important;
}

.syntaxhighlighter .gutter .line {
  border-right: 3px solid yellow !important;
}

他にも修正した個所があったかもしれませんが,diffでもかけんと覚えておりませんわ…

[*]下へこのページのボトムへ▼ ▲[#]上へこのページのトップへ

LaTeX用shBrushLatex.js

無事インストールして喜んだのもつかの間,欲しい言語のshBrushがないがな,LaTeXにR言語にProcessing(タダばかりですが)… まぁそういうときはGoogle頼み(笑) 検索すると奇特な方がいらっしゃいました.LaTeX用のshBrushLatex.jsは次のところからダウンロードさせていただきました.scriptsフォルダに転送してやればOKです.

ただそのままではうまく動かんかったんで(少なくとも私のところでは…),shBrushLatex.jsの"keywords"から"gt"と"lt"を取り除きました.

var keywords ='if fi then elif else for do done until while break continue case function return in eq ne ge le';

<pre>タグでのbrushの指定は"latex"になります.

<pre class="brush:latex toolbar:false">
\begin{document}

% タイトルページ
\begin{frame}
\titlepage
\end{frame}
</pre>

表示例

\begin{document}

% タイトルページ
\begin{frame}
\titlepage
\end{frame}

[*]下へこのページのボトムへ▼ ▲[#]上へこのページのトップへ

R用shBushR.js

統計処理環境のR言語もお世話になっております.ただこれもshBrushが標準ではありませんでした.というわけで,これもGoogleで検索すると見つかりました.shBrushR.jsは次のところからダウンロード可能です.scriptsフォルダに転送してやればOKです.たぶんこれはそのまま動いたと記憶しています.

<pre>タグでのbrushの指定は"r"になります.

<pre class="brush:r toolbar:false">
install.packages("extrafont")
library(extrafont)
font_import()
</pre>

表示例

install.packages("extrafont")
library(extrafont)
font_import()

Processing用shBruushProcessing.js

プログラム開発環境のProcessingも研究・教育ともにお世話になっております.が,これも今のところ標準ではshBrushがありませんでした.サクッと検索するとありました(笑) shBrushProcessing.jsは次のところからダウンロードいたしました.検索では別のサイトも見つかりましたので,お好みのものを利用いただくとよいと思います.

Processingはcssの修正も必要になります.shThemeDefault.cssに次の行を追加する必要があるそうです.

.syntaxhighlighter .color4,
.syntaxhighlighter .color4 a
{ 
	color: #006699 !important; 
}

.syntaxhighlighter .color5,
.syntaxhighlighter .color5 a
{ 
	color: #CC6600 !important; 
}

<pre>タグでのbrushの指定は"processing"になります.

<pre class="brush:processing toolbar:false">
// Draw gray box
stroke(153);
line(p3, p3, p2, p3);
line(p2, p3, p2, p2);
line(p2, p2, p3, p2);
line(p3, p2, p3, p3);
</pre>

表示例

// Draw gray box
stroke(153);
line(p3, p3, p2, p3);
line(p2, p3, p2, p2);
line(p2, p2, p3, p2);
line(p3, p2, p3, p3);

[*]下へこのページのボトムへ▼ ▲[#]上へこのページのトップへ

情報源など

参考にさせていただいたサイトです(順不同).

[*]下へこのページのボトムへ▼ ▲[#]上へこのページのトップへ

このサイトに関するお問い合わせは,連絡先のページをご覧ください.
http://www.sip-ac.jp/sip/syntaxhighlighter.html,    2001 Ayumi Yoshikawa
主観情報処理研究所