プレゼンツール S5 と dp.syntaxhighlighter で勉強会資料を作る

どうも、某イベントに参加してストレス発散してきたtanakaです。

今日はプレゼンテーションツールのS5とJavaScriptによるシンタックスハイライトツールである、dp.syntaxhighlighterを使って勉強会の資料の見栄えを良くするノウハウを紹介します。

まず、S5とdp.syntaxhighlighterをダウンロードします。ここではS5 1.1とdp.syntaxhighlighter 1.5.1を利用いたします。

圧縮ファイルになっているので、２つとも解凍します。さらに、S5は解凍すると、s5-blank.zipという圧縮ファイルが入っているので、これを解凍します。

すると、s5-brankというフォルダがあり、その中に、またs5-brankというフォルダがあります。この中にdp.syntaxhighlighterを配置します。

フォルダの配置は以下の通りにします。

s5-blank/
`- s5-blank/
   |- css/ フォルダを作ってください
   |  |- mycss.css プレゼン & 印刷用
   |  `- print.css 印刷用CSS
   |- js/ フォルダを作ってください
   |  `- dp.SyntaxHighlighter/ 解凍したものをそのまま入れる
   |- s5-blank.html
   `- ui/

cssは自分で書きましたが、dp.SyntaxHighlighterの中身はいじっていません。

さて、文書構造の本体であるs5-brank.htmlをいじっていきます。(ファイル名を自分の資料の名前に変えてもいいでしょう)

まずは、CSS読み込み部分を追加します。以下のコードを<link rel="stylesheet" href="ui/default/opera.css" type="text/css" media="projection" id="operaFix" />の下辺りに追加します。

s5-brank.html

<!-- dp.syntaxhighlighter -->
<link type="text/css" rel="stylesheet" href="js/dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css" />
<!-- original css -->
<link type ="text/css" rel="stylesheet" href="css/mycss.css" media="all" />
<link type ="text/css" rel="stylesheet" href="css/print.css" media="print" />

その次に、s5-brank.htmlの最後、bodyの終了タグの前に以下のコードを挿入します。

<script class="javascript" src="js/dp.SyntaxHighlighter/Scripts/shCore.js"></script>
<script class="javascript" src="js/dp.SyntaxHighlighter/Scripts/shBrushCSharp.js"></script>
<script class="javascript" src="js/dp.SyntaxHighlighter/Scripts/shBrushPhp.js"></script>
<script class="javascript" src="js/dp.SyntaxHighlighter/Scripts/shBrushJScript.js"></script>
<script class="javascript" src="js/dp.SyntaxHighlighter/Scripts/shBrushJava.js"></script>
<script class="javascript" src="js/dp.SyntaxHighlighter/Scripts/shBrushVb.js"></script>
<script class="javascript" src="js/dp.SyntaxHighlighter/Scripts/shBrushSql.js"></script>
<script class="javascript" src="js/dp.SyntaxHighlighter/Scripts/shBrushXml.js"></script>
<script class="javascript" src="js/dp.SyntaxHighlighter/Scripts/shBrushDelphi.js"></script>
<script class="javascript" src="js/dp.SyntaxHighlighter/Scripts/shBrushPython.js"></script>
<script class="javascript" src="js/dp.SyntaxHighlighter/Scripts/shBrushRuby.js"></script>
<script class="javascript" src="js/dp.SyntaxHighlighter/Scripts/shBrushCss.js"></script>
<script class="javascript" src="js/dp.SyntaxHighlighter/Scripts/shBrushCpp.js"></script>
<script class="javascript">
dp.SyntaxHighlighter.ClipboardSwf = 'js/dp.SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

さて、それではソースコードをスライドに表示してみましょう。

s5-brank.html

<div class="slide">
    <h1>dp.SyntaxHighlighterのテスト</h1>
<pre name="code" class="php">
&lt;?php
    echo &quot;Hello,dp.syntaxHighlighter&lt;br /&gt;&quot;
?&gt;
</pre>
</div>

S5は<div class="presentation">というひとつのdiv要素の中に

スライドの数だけの<div class="slide">が順番に並べられて構成されています。ですから、その間にこのコードをペーストしてみてください。

ソースコードが色付きで表示されましたでしょうか？

ん、あれ？僕が最初に試したときは、行番号のとなりの緑色のバーが点線になってしまっていて、正しく表示するために、CSSを書いたんですが…環境によって違うようですねorz。以下参考までに

css/mycss.css

ol.dp-c li{
    font-size: 20px;
    line-height:1.3em;
    margin-top:0em;
}

さて、S5ではテーブルや引用ブロックを使っても背景が真っ白だったりでわかりにくかったりしますので、これもカスタマイズします。1,2日いじった結果次のようになりました。

css/mycss.css

table {
    background-color: #cccccc;
    border-collapse: collapse;
}

table td{
    text-align: right;
    border: 2px solid #333333;
    padding: 2px 30px;
}
blockquote {
    background-color: #dddddd;
    font-style:normal;
    font-size:0.8em;
}
ol.dp-c li{
    font-size: 20px;
    line-height:1.3em;
    margin-top:0em;
}

テーブルとソースコードを表示するとこんな感じになります。

さて、調子に乗って印刷用CSSもつくっちゃいました。

css/print.css

ol.dp-c li{
    font-size: 15px;
    line-height:1.3em;
    margin-top:0em;
}
div.pages-first{
page-break-before: always;
}

これで、通常<div class="slide">となっているスライド1枚のdiv要素を<div class="slide pages-first">と書き換えると、そのスライドの前で改ページをしてくれます。

まとめ

シンタックスハイライトツールを使って、勉強会資料の見やすさを向上させましょう。

ソースコードのタグに使われる記号を実体参照に変換するのは蓄々HTML実体参照変換が便利です。