昨日 Syntax Highlighter を導入してやれやれと思っていたのですが、スマートフォンから見るとかなり表示が崩れてる。。。　う～む。

なんかイマイチだなぁと思っていたら、”google-code-prettify”なるものを発見！


google-code-prettify
https://code.google.com/p/google-code-prettify/


さすが、インターネッツの雄 Google さんです。で、早速下記コードをHTMLヘッダーに追加してみました。（追加の仕方はまた後日～）



&ltlink href="https://google-code-prettify.googlecode.com/svn/loader/prettify.css" type="text/css"
 rel="stylesheet" />
&ltscript src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
&ltscript src="https://google-code-prettify.googlecode.com/svn/loader/lang-css.js"></script>
&ltscript src="https://google-code-prettify.googlecode.com/svn/loader/lang-sql.js"></script>
&ltscript src="https://google-code-prettify.googlecode.com/svn/loader/lang-vb.js"></script>




きちんと見えるかな。。。いろいろ試行錯誤しましたが、ようやく見えるようになりました。スマートフォンでもそれらしく見えています。

PCとスマホ両方それなりに見せるには、"Syntax Highlighter" ではなくて "google-code-prettify" のほうがよさそうです。でもちょっと癖があるので使いこなすのが大変そうだなぁ。
σ（ー ε ー）


関連記事
ブログにソースコードをどう貼るか悩む。。。
http://makers-with-myson.blog.so-net.ne.jp/2014-10-27





HTML+JavaScriptによるプログラミング入門

  • 作者: 古金谷 博
  • 出版社/メーカー: 日経BP社
  • 発売日: 2014/08/06
  • メディア: 単行本



HTMLとCSSで基礎から学ぶJavaScript

  • 作者: 園田 誠
  • 出版社/メーカー: 秀和システム
  • 発売日: 2011/09
  • メディア: 単行本



ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング (NextPublishing)

  • 作者: 田中 賢一郎
  • 出版社/メーカー: インプレスR&D
  • 発売日: 2013/10/25
  • メディア: オンデマンド (ペーパーバック)