HTML Slidy + google-code-prettify
PHP勉強会は毎回成果物として、プレゼン資料とコードを必須にしようと思っています。
今日は、HTML SlidyのCSSを書いていました。あとgoogle-code-prettifyとの連携です。
まず、CSS。ちょっと適当なのであまり真似をしないで下さいね。
slide.css
* { margin: 0; padding: 0; font-size: 100%; color: #333; font-style: normal; font-weight: normal; font-family: Tahoma Arial, Helvetica, sans-serif; line-height: 1.6; } body { width: 100%; height: 100%; } /* * div.slide */ div.slide { width: 100%; height: 90%; z-index: 10; } div.slide h1, h2 { width: 100%; height: 70px; line-height: 70px; background-color: #9999cc; background-image: url("../img/php.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: top left; color: #fff; font-size: 160%; text-align: center; } div.slide p, table, pre, ul, ol, blockquote { margin: 1em; } div.slide table { border: 1px solid #ddd; border-collapse: collapse; empty-cells: show; } div.slide table td, th { border: 1px solid #ddd; empty-cells: show; } div.slide ul, ol { margin-left: 3em; } div.slide pre, blockquote { padding: 1em; border: 1px solid #aaa; overflow: hidden; } div.silide a { text-decoration: none; border-style: none none dotted none; border-width: 0 0 1px 0; border-color: #333; } div.silide a:hover { text-decoration: none; border-style: none none solid none; border-width: 0 0 1px 0; border-color: #333; } /* * toolbar */ .toolbar { background-color: #9999cc; padding: 0.5em; text-align: right; position: absolute; top: auto; left: 0; right: 0; bottom: 0; } .toolbar a { color: #fff; } .toolbar div { color: #fff; }
あとgoogle-code-prettifyとの連携。slidy.jsのfunction startup()の最終行に
prettyPrint();
を足してあげて下さい。これで<pre class="prettyprint">とマークアップされたものはハイライトされます。
あとでサンプルを上げておきます。