スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

SyntaxHighlighterでコードをおしゃれに表示

現在このブログでコードを表示する際はpreタグを使用しているのですが、コピーしやすかったり行数を表示したりと、もっと便利にしたいと思い調べてみるといいものがありました。
これを使うと以下のようにコードを表示することができます。
<link type="text/css" rel="stylesheet" href="http://weboook.blog22.fc2.com/css/SyntaxHighlighter.css" />
<script type="text/javascript" src="http://weboook.blog22.fc2.com/js/shCore.js" charset="Shift_JIS"></script>
<script type="text/javascript" src="http://weboook.blog22.fc2.com/js/shBrushJScript.js"></script>
<script type="text/javascript" src="http://weboook.blog22.fc2.com/js/shBrushCss.js"></script>
<script type="text/javascript" src="http://weboook.blog22.fc2.com/js/shBrushXml.js"></script>
必要な外部ファイルを読み込んで以下のようにpreタグにnameとclassを指定してあげます。表示するコードの種類によってclassを変えることができます。shCore.jsをいじってあげると上にあるナビゲーションも変更できます。
<pre name="code"class="xml">
</pre>
このほかにwindow.onloadで読み込んだりする必要もあり、日本語化など色々調べてみるとすばらしいサイトがありました。かなり参考になりました。
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。