これを導入すると、ぐっとそれらしくなるようですが・・・めんどくささが先に立っては駄目ですね。
後でやってみましょう。
参考ブログはこちら
http://komitsudo.blog70.fc2.com/blog-entry-168.html
と思った矢先、もっと簡易な方法もあるようです。
syntaxhighlighterの制作者Alex GorbatchevさんがCDNを配信してくださっていますので、Blogger用にはこれを使います。使い方は以下の通りです。http://www.youngflavor.net/2012/04/82/
こちらを先に試してみましょう。 「
◆script class="brush: ***" type="syntaxhighlighter"><![CDATA[ソースコード]]> か
◆pre class="brush:***">ソースコード
どちらかをここに記入（これはその都度入力となる）
登録したソースコードは３つ
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml,js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
ということは、登録したソースコードの３つ
"brush:Xml.js"
"brush:Css.js"
"brush:JScript.js"
と入力すればいい？
◆pre class="brush:Css.js">
ソースコード
</pre>
これを◆を「<」にしてHTMLにソースコードも一緒に入力してみる・・・
div {
width: 200px;
height: 100px;
padding: 30px;
margin: 30px;
background-color:orange;
border:2px solid black;
text-shadow:10px 10px 3px red,20px 20px 6px blue;
font-size:24px;
font-width:bold;
}
うまくいかん？div { width: 200px; height: 100px; padding: 30px; margin: 30px; background-color:orange; border:2px solid black; text-shadow:10px 10px 3px red,20px 20px 6px blue; font-size:24px; font-width:bold; }
おお！Cssはうまくいっていると思われます。
しかし、その都度、手間がかかりますね。
ところで、囲みでやればいいんじゃないか・・・はい。行の番号はあきらめて。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS3</title>
<style>
div {
width: 200px;
height: 100px;
padding: 30px;
margin: 30px;
background-color:orange;
border:2px solid black;
text-shadow:10px 10px 3px red,20px 20px 6px blue;
font-size:24px;
font-width:bold;
}
</style>
</head>
<body>
<div id="みばえ">みばえ</div>
</body>
</html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS3</title>
<style>
div {
width: 200px;
height: 100px;
padding: 30px;
margin: 30px;
background-color:orange;
border:2px solid black;
text-shadow:10px 10px 3px red,20px 20px 6px blue;
font-size:24px;
font-width:bold;
}
</style>
</head>
<body>
<div id="みばえ">みばえ</div>
</body>
</html>
テンプレートも元に戻しておきます。
