引用スタイルをカスタマイズする

外部ブログやニュースサイトからテキストを引用する時には、HTMLの <blockquote> タグを用います。
今回は、引用のデザインをかっこよくするために、Movable TypeのCSSをカスタマイズしてみました。

まずは、一般テキストの引用についてです。creazy photographさんのこちらを参考にさせていただきました。ありがとうございます。シンプルでかっこいいです。

こんな感じで引用できます。

  毎日少しずつ。それがなかなかできねんだなあ。

via: 相田みつを

次に、HTMLソースやプログラムソースを表示するのに便利な、SyntaxHighlighter を紹介いたします。これはテキストエリアをJavascript + CSS でカスタマイズする為のものです。行番号を表示したり、各種言語に対応するハイライト機能、クリップボードへのコピーなど、ものすごく機能的です。
Yahoo! Developer Network でも用いられていて、お目にかかったことがあるのではないでしょうか。



とりあえずこんな感じです。

<?php<br /> print(“Hello! World.”);<br /> ?><br />

かっこいい！

SyntaxHighlighter のダウンロードと、インストール方法はこちらを参照してください。

dp.SyntaxHighlighter.HighlightAll(‘code’);