«
»

2010.01.19

WordPressでソースコードをキレイに表示したい。「iG:Syntax Hiliter 日本語版」導入メモ。

ソースコードをキレイに表示したいなあと思って「iG:Syntax Hiliter 日本語版」プラグインを入れました。

○iG:Syntax Hiliter 日本語版 - MMRT daily life

http://wp.mmrt-jp.net/plugin-japanization-project/ig_syntax_hilite/

[css][/css]とか[html][/html]とかでソースを囲むと、ある程度のハイライト表示をしてくれるものです。
対応フォーマットはphp,as3,css,htmlなど、自分が主に使うモノは大丈夫そう。

CSS修正

但し私の環境下ではソース部分の表示が切れてしまったので、「syntax_hilite_css.css」を以下のように。
横幅を「width: 90%;」に、paddingの設定を揃えました。
ソース部分が表示されるようになったのでとりあえずこれで…。

CSS:
  1. .syntax_hilite, li .syntax_hilite {
  2.     padding:3px 3px 10px 8px; border:1px solid #303130; background-color:#FEFEFE;
  3.     font-size:11px; font-family:'Courier New',Courier,monospace;
  4.     /* comment the line below to remove scrolling in code boxes */
  5.     overflow:auto; white-space:nowrap;
  6. }
  7. /* change this line to set the width of code box */
  8. .syntax_hilite { width:90%; }
  9. /* change this line to set the width of code box in a list */
  10. li .syntax_hilite { width:90%; }
  11. .igBar, li .igBar {
  12.     background-color:#D6D3CE; font-family:courier,arial,verdana;
  13.     border-left:1px solid #EEEEEE; border-top:1px solid #EEEEEE;
  14.     border-right:1px solid #424142;
  15.     padding:0px 3px 0px 8px;
  16. }
  17. /* change this line to set the width of plain text bar above code box */
  18. .igBar { width:90%; }
  19. /* change this line to set the width of plain text bar above code box in a list */
  20. li .igBar { width:auto; }
  21. .igBar a, .igBar a:hover {
  22.     margin:0px 5px 0px 10px; font-weight:bold; color:#000000;
  23.     text-decoration:none;
  24. }
  25. .syntax_hilite .langName { color:#000000; font-weight:bold; }
  26. .syntax_hilite textarea { margin:0px -5px -2px 0px; border:none; }

Trackback URL

Comment & Trackback

No comments.

Comment feed

Comment





XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

コメントリンクを nofollow free に設定することも出来ます。