ブログを始めたらやってみたいことの1つがプログラムのソースコードを表示することでした。
SyntaxHighlighterの導入
エリア内でダブルクリックするとコピーすることができます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | < span style = "font-size: x-small;" > <!-- SyntaxHighlighter 追加 --> < script src = 'https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js' type = 'text/javascript' /> <!-- autoloader対応 --> < script src = 'https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shAutoloader.js' type = 'text/javascript' /> <!-- /HTMLと他言語を同時にハイライト対応用(html-script: true) --> < script src = 'https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.js' type = 'text/javascript' /> <!-- テーマの読み込み(shCore.css内包版) --> < link href = 'https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreRDark.css' rel = 'stylesheet' type = 'text/css' /> < script language = 'javascript' type = 'text/javascript' > var shCdnUrlStr='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83'; SyntaxHighlighter.autoloader( 'actionscript3 as3 '+shCdnUrlStr+'/scripts/shBrushAS3.js', 'bash shell '+shCdnUrlStr+'/scripts/shBrushBash.js', 'coldfusion cf '+shCdnUrlStr+'/scripts/shBrushColdFusion.js', 'cpp c '+shCdnUrlStr+'/scripts/shBrushCpp.js', 'c# c-sharp csharp '+shCdnUrlStr+'/scripts/shBrushCSharp.js', 'css '+shCdnUrlStr+'/scripts/shBrushCss.js', 'delphi pascal pas '+shCdnUrlStr+'/scripts/shBrushDelphi.js', 'diff patch '+shCdnUrlStr+'/scripts/shBrushDiff.js', 'erlang erl '+shCdnUrlStr+'/scripts/shBrushErlang.js', 'groovy '+shCdnUrlStr+'/scripts/shBrushGroovy.js', 'html xml xhtml xslt '+shCdnUrlStr+'/scripts/shBrushXml.js', 'java '+shCdnUrlStr+'/scripts/shBrushJava.js', 'javafx jfx '+shCdnUrlStr+'/scripts/shBrushJavaFX.js', 'javascript js jscript '+shCdnUrlStr+'/scripts/shBrushJScript.js', 'perl pl '+shCdnUrlStr+'/scripts/shBrushPerl.js', 'php '+shCdnUrlStr+'/scripts/shBrushPhp.js', 'text plain '+shCdnUrlStr+'/scripts/shBrushPlain.js', 'powershell ps '+shCdnUrlStr+'/scripts/shBrushPlain.js', 'python py '+shCdnUrlStr+'/scripts/shBrushPython.js', 'ruby rails ror '+shCdnUrlStr+'/scripts/shBrushRuby.js', 'scala '+shCdnUrlStr+'/scripts/shBrushScala.js', 'sql '+shCdnUrlStr+'/scripts/shBrushSql.js', 'vb vbnet '+shCdnUrlStr+'/scripts/shBrushVb.js' ); SyntaxHighlighter.config.bloggerMode = true; // Blogger対応 SyntaxHighlighter.defaults['toolbar'] = false; // 「?」表示 SyntaxHighlighter.defaults['auto-links'] = false; // 自動リンク //不具合が起きる為コメント化。使用時はpre側で要記述。 //SyntaxHighlighter.defaults['html-script'] = true; //HTMLと他言語を同時にハイライト SyntaxHighlighter.defaults['tab-size'] = 2; //tabインデント量 // コード表示させるタグ名(デフォルト"pre") // SyntaxHighlighter.config.tagName=""; SyntaxHighlighter.all(); </ script > < style > .syntaxhighlighter { border: 1px solid #bbbbbb !important; /* 罫巻 */ /* 角丸 */ -webkit-border-radius: 10px !important; -moz-border-radius: 10px !important; -ms-border-radius: 10px !important; -o-border-radius: 10px !important; border-radius: 10px !important; } .syntaxhighlighter table caption { padding: 0.3em 0 0.1em 1em !important; /* タイトルpadding */ color: #ffffee !important; /* タイトル文字色 */ background-color: #666666 !important; /* タイトル背景色 */ } .syntaxhighlighter, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter span { line-height: 1.2em !important; /* 行間 */ } .syntaxhighlighter table td.code { padding: 0.3em 0 !important; /* コードエリアのpadding */ } .syntaxhighlighter { background-color: #222222 !important; /* コード背景色 */ } .syntaxhighlighter .line.alt1 { background-color: #222222 !important; /* コード偶数行背景色 */ } .syntaxhighlighter .line.alt2 { background-color: #333333 !important; /* コード奇数行背景色 */ } .syntaxhighlighter .comments, .syntaxhighlighter .comments a{ color: #88eeee !important; /* コメント色 */ } .syntaxhighlighter .preprocessor { color: #88eeee !important; /* #以降の色 */ } .syntaxhighlighter .value { color: #00cc00 !important; /* 代入数字色 */ } .syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line { padding-left: 1em !important; /* 行番号非表示時左空き量 */ } .syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 { background-color: #114466 !important; /* 行強調時、行背景色 */ } .syntaxhighlighter .line.highlighted.number { color: white !important; /* 行強調時、数字? */ } .syntaxhighlighter .gutter .line.highlighted { background-color: #3185b9 !important; /* 行強調時、行番号背景色 */ color: #121212 !important; /* 行強調時、行番号数字色 */ } </ style > <!-- SyntaxHighlighter 追加 --> </ span > |
ここで注意することが、「</body>」ということです。自分も様々なサイトを調べていたのですが多くが「</head>」タグのすぐ上にペーストする方法でした。しかし、うまく導入することができずハマってしまいました。
ペーストを終えたら、テーマの保存を忘れずに行いましょう。
これで、SyntaxHighlighterの導入は終わりです!
ソースコードを表示してみる
1 2 3 | <pre class="brush:text" title="タイトル"> 書きたいコード </pre> |
1 2 3 | <script class="brush:text" title="タイトル" type="syntaxhighlighter"><![CDATA[ 書きたいコード ]]></script> |
「<pre>」を使用する場合「<」を「<」へ「>」を「>」へ置換が必要になります。
これで、ちゃんと表示ができたのではないでしょうか?
表示のカスタマイズなどもしやすくなっているので皆さんの好みの設定にカスタマイズしてみてください!
やってみました。/bodyタグの上に置くんですね。わかりやすい記事です。
返信削除