Bloggerでソースコードを貼り付ける方法
これから書いていくコードを載せるときに不便だなぁと思ったのでソースコードを貼れるようにカスタマイズしたいと思います。
それで調べてみたところ何人かの方々が同じようなことを思ったらしく情報がたくさんありましたので幾つかを参考にさせていただきました。
参考サイト
SyntaxHighlighter公式ページ
プログラミング はじめる。 ブログ（Blogger）にプログラムのソースコードを埋め込む方法
digitra Bloggerでコードを綺麗に表示できるようにする
DevAchieve BloggerにソースコードをハイライトするSyntaxHighlighterを導入する
沢山のサイトを拝見させていただいたときに"SyntaxHighlighter"の文字が多く見られなんだろうと思い調べてみるとcssで作られたコードをきれいに見せるプラグイン的なものでした。
SyntaxHighlighter公式ページ
プログラミング はじめる。 ブログ（Blogger）にプログラムのソースコードを埋め込む方法
digitra Bloggerでコードを綺麗に表示できるようにする
DevAchieve BloggerにソースコードをハイライトするSyntaxHighlighterを導入する
沢山のサイトを拝見させていただいたときに"SyntaxHighlighter"の文字が多く見られなんだろうと思い調べてみるとcssで作られたコードをきれいに見せるプラグイン的なものでした。
それではBloggerに適応してみましょう。
SyntaxHighlighterを使う
/* Pretty printing styles. Used with prettify.js. */
/* SPAN elements with the classes below are added by prettyprint. */
.pln { color: #000 } /* plain text */
@media screen {
.str { color: #080 } /* string content */
.kwd { color: #008 } /* a keyword */
.com { color: #800 } /* a comment */
.typ { color: #606 } /* a type name */
.lit { color: #066 } /* a literal value */
/* punctuation, lisp open bracket, lisp close bracket */
.pun, .opn, .clo { color: #660 }
.tag { color: #008 } /* a markup tag name */
.atn { color: #606 } /* a markup attribute name */
.atv { color: #080 } /* a markup attribute value */
.dec, .var { color: #606 } /* a declaration; a variable name */
.fun { color: red } /* a function name */
}
/* Use higher contrast and text-weight for printable form. */
@media print, projection {
.str { color: #060 }
.kwd { color: #006; font-weight: bold }
.com { color: #600; font-style: italic }
.typ { color: #404; font-weight: bold }
.lit { color: #044 }
.pun, .opn, .clo { color: #440 }
.tag { color: #006; font-weight: bold }
.atn { color: #404 }
.atv { color: #060 }
}
/* Put a border around prettyprinted code snippets. */
pre.prettyprint { padding: 0 0 0 3px !important; background: rgb(248, 248, 248) !important; color: gray; border: 1px solid rgb(224, 224, 224);}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; background: rgb(248, 248, 248); } /* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L4,
li.L5,
li.L6,
li.L7,
li.L8,
li.L9 { line-height: 1.5; border-left: solid 3px #6CE26C; padding-left: 3px;}
/* Alternate shading for lines */
li.L0,
li.L2,
li.L4,
li.L6,
li.L8 { background: white; }
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: rgb(248, 248, 248); }
pre.prettyprint {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
width: 95%;
margin: .8em; auto;
word-wrap: break-word;
white-space: pre-wrap;
overflow: auto
}
コピペしたら次は"テンプレート"→"HTMLの編集"と開いて、<head>タグの適当な位置に以下のコードをコピペします。
<script src="https://raw.github.com/gist/1522901/" type="text/javascript">
これで設定は終了、実際に記事に表示させるには
<pre class="prettyprint linenums"> ソースコード </pre>とする。
0 件のコメント:
コメントを投稿