今更ですが、ソースコード貼付けについてです。

毎回行き詰まる度に、いろいろな方のBlogのMTタグ、CSS、JSなんかを参考にさせていただいています。
そこで、自分のBlog内にも備忘録的に、ソースコードを残していきたいと思います。


1.分かりやすい見た目
2.コピペ可能

という二点のみを考え作成します。


ググッて、まずはブログにコードを貼り付ける方法で悩むの巻 | IDEA*IDEAという記事を参考にさせていただきました。

なるほど、<pre>で囲んだ領域は、記述されたスペース・改行などを、そのまま等幅フォントで表示すると。


OK、理屈は分かった。次は見た目です。
preタグスタイルいろいろ CSS - Layer8 Referenceを参考にさせていただきました。

ってことで、preにcssを当てて、こんなのを作りました。

/* Source code */
pre{
font-family: "Courier New",Courier,monospace;
font-size: 1em;
color: #007000;
background-color: #fafafa;
border: solid 1px #bbb;
line-height: 100%;
margin: 1em 1px;
padding: 0.99em;
overflow-x: auto;
overflow-y: auto;
width:auto;
}

ここまで、想像通りの見た目が出来ました。


ただ、実際にMTの編集画面から<pre>と書く際は&lt;pre&gt;実体参照という書式に手書きで直さなきゃならないので、ちょっと面倒くさいです。
JSを使った、実体参照変換ツールサイトはあるのですが、一旦移動して、貼りつけて、コピって戻ってペースト というのは修正がしんどいです。
出来れば、投稿時にそのままソースコードなりを貼りつけて、投稿したいところです。


「困ったら、プラグイン探してみる」という他力本願精神で探してみたところ、やっぱりありました。
MovableType用EntityRefButtonプラグイン v0.0.5
MT5で動作すればバッチリ。


ま、そう上手くは行かないですね。。
残念ながら、現状、MT5では動作しないようです。


同じところで悩む方もいらっしゃいました。
[MovableType]EntityRefButtonプラグインが動かない場合の対処法 - DQNEO起業日記
実体参照を、ブックマークレットを使って処理するという目から鱗のアイディア。


これで、サーバー容量、プラグイン同士のカチ合いリスクから解放されるという、夢のアイディーア。


これで、いったんうまくいきました。


次は<pre>内の装飾をやってみます。




コメント(1)

お役に立ててなによりです。私もあのブックマークレットを使う前は、がんばって手動で秀丸に張り付けて置換とかしてました(笑)

コメントする

トラックバックURL:http://buster-workz.com/mt/mt-tb.cgi/19


<MT 記事がなかったら代替表示  Google Analytics 自分のアクセスを除外>

Copyright © buster-workz All rights reserved.