最終更新日：2015-12-26
記事内にソースコードを貼っている状態で記事の再編集をすると、時として文字化けを起こすことがあります。
ここでは、すでに文字化けを起こしてしまった部分を元に戻す方法について、覚書したいと思います。
カテゴリー別アーカイブ: ソースコード
[WordPress.com] Markdown 記法でソースコードを貼る
!WordPress.com の記事編集機能の仕様が随時変更されているようです。2014-09-09現在でのソースコードの WordPress.com への貼り付けの傾向についての私自身の認識は以下の記事のとおりです。
これまで、HTML や CSS、ショートコードなどをブログの記事中に表示するとき、文字化けを起こしたりして結構気を使っていました。
しかしながら、どうやらそういったことに悩む必要はもうあまりなさそうです。
!
Tab または4文字の半角空白での整形済みテキスト表示はできなくなっているようです。（2014-08-04追記）
WordPress.com の場合、Markdown 記法を使えるように設定し、
Tab または 4文字の半角空白を各行の先頭に追加するなどすればいいようです。
ソースコードの部分を ``` で囲うか、 ```css,``` 等で囲うなどすると
色付きの表示になったりする（ソースコード表示専用の機能が作動する？）ようです。
#categories-4 .cat-item-25788,
#categories-6 .cat-item-25788 {
display: block;
visibility: hidden;
}
Windows Live Writer から WordPress.com へ HTML や CSS のソースコードを直接投稿する方法
Windows Live Writer から WordPress.com へ HTML や CSS のソースコードを直接投稿する方法が紹介されていたので、その覚書です。
Windows Live Writer から PowerShell のコードを投稿する | Operations Lab.
[WordPress.com] ソースコードの右下にラベルをつける
以下の CSS を CSS スタイルシートエディターに追加すると
/* ソースコードの装飾 */
div.syntaxhighlighter {
outline: 6px solid #eccbbb;
box-shadow: 0 0 0 7px #dabcad;
margin-bottom: 2.625em !important;
}
div.syntaxhighlighter.xml:before,
div.syntaxhighlighter.plain:before {
content: "ＨＴＭＬ";
position: absolute;
bottom: 0;
right: 20px;
height: 20px;
background-color: #c27d5a;
background-color: rgba(194,125,90,0.7000);
border-radius: 3px 3px 0 0;
border: 1px solid #ccc;
text-align: center;
line-height: 20px;
z-index: 1;
color: #fff;
text-shadow: -1px -1px 1px #9f4f27;
padding-right: 7px;
padding-left: 7px;
font-size: 10px;
}
div.syntaxhighlighter.css {
outline: 6px solid #aee3e8;
box-shadow: 0 0 0 7px #93c0c4;
}
div.syntaxhighlighter.css:before {
content: "ＣＳＳ";
position: absolute;
bottom: 0;
right: 20px;
height: 20px;
background-color: #31b1bc;
background-color: rgba(49,177,188,0.700);
border-radius: 3px 3px 0 0;
border: 1px solid #ccc;
text-align: center;
line-height: 20px;
z-index: 1;
color: #fff;
text-shadow: -1px -1px 1px #237d85;
padding-right: 7px;
padding-left: 7px;
font-size: 10px;
}
ソースコードの右下にラベルをつけたりすることができます。
[WordPress.com] ショートコードの記述を表示する方法についての考察
プラグイン「SyntaxHighlighter evolved」と「Front-end Editor（フロントエンド・エディタ）」とがコンフリクトするときには、SyntaxHighlighter のバージョンを下げればいいかもしれない、という話
[WordPress.com からレンタルサーバの WordPress へ] github を使って貼りつけたソースコードはプラグイン「oEmbed Gist」をインストールすればOK
WordPress.com にソースコードを貼り付けるとき、［code］等のタグを使う方法もありますが、github を使って貼り付ける方法もあります。github を使ってソースコードを貼り付けていた場合（記事「GitHub を使って、WordPress.com にソースコードを貼る」参照）は、プラグイン「oEmbed Gist」をインストールすれば OK でした。
