ソースコードをブログで表示する

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
  • 0
WS000000

たまにホームページ上にプログラムのソースコードが載っていて説明が書いてあったりします。

これを利用して僕なりのウェブデザイナーの忘備録を作っていきます。

そこで今回、取り入れるものはワードプレスのプラグインで有名な

SyntaxHighlighter Evolved

これをインストールして使ってみます。

まずは、設定。

WS000001

[]で言語を指定して(html,css,phpなど)ソースを囲んで、最後に「/」でhtmlのプログラムのように閉じて使います。

<nav id="nav-pc" class="clearfix">
 
 <ul>
 <li class="nav01"><a href="index.html">Top</a></li>
 <li class="nav02"><a href="concept.html">Concept</a></li>
 <li class="nav03"><a href="works.html">Works</a></li>
 <li class="nav04"><a href="office.html">Office</a></li>
 <li class="nav05c"><a href="contact.html">Contact</a></li>
 </ul>

</nav>

色々とカスタマイズできるようですが、まずは使ってみるべし。

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

コメントを残す