【mac, WordPress.com】ソースコード等の文字化けを解除する方法-🔵

最終更新日:2015-12-26

記事内にソースコードを貼っている状態で記事の再編集をすると、時として文字化けを起こすことがあります。

ここでは、すでに文字化けを起こしてしまった部分を元に戻す方法について、覚書したいと思います。

続きを読む

[WordPress.com] Markdown 記法でソースコードを貼る

!

WordPress.com の記事編集機能の仕様が随時変更されているようです。2014-09-09現在でのソースコードの WordPress.com への貼り付けの傾向についての私自身の認識は以下の記事のとおりです。

 

これまで、HTML や CSS、ショートコードなどをブログの記事中に表示するとき、文字化けを起こしたりして結構気を使っていました。

しかしながら、どうやらそういったことに悩む必要はもうあまりなさそうです。

 

!

Tab または4文字の半角空白での整形済みテキスト表示はできなくなっているようです。(2014-08-04追記)

 

WordPress.com の場合、Markdown 記法を使えるように設定し、

![画像](http://comguideja.files.wordpress.com/2013/11/accessmenubarapps-43.png)

Tab または 4文字の半角空白を各行の先頭に追加するなどすればいいようです。

![画像](http://comguideja.files.wordpress.com/2013/11/accessmenubarapps-49.png)

rect3015

ソースコードの部分を ``` で囲うか、 ```css,``` 等で囲うなどすると

画像

色付きの表示になったりする(ソースコード表示専用の機能が作動する?)ようです。

#categories-4 .cat-item-25788,
#categories-6 .cat-item-25788 {
display: block;
visibility: hidden;
}

続きを読む

#2013

Windows Live Writer から WordPress.com へ HTML や CSS のソースコードを直接投稿する方法

Windows Live Writer から WordPress.com へ HTML や CSS のソースコードを直接投稿する方法が紹介されていたので、その覚書です。

AccessMenuBarApps-113
Windows Live Writer から PowerShell のコードを投稿する | Operations Lab.

続きを読む

#2013

[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: "HTML";
	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: "CSS";
	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;
}

ソースコードの右下にラベルをつけたりすることができます。

sdggsdfgdf

rect3015

sadgdfgf

#2013

[WordPress.com] ショートコードの記述を表示する方法についての考察

続きを読む

#2013

プラグイン「SyntaxHighlighter evolved」と「Front-end Editor(フロントエンド・エディタ)」とがコンフリクトするときには、SyntaxHighlighter のバージョンを下げればいいかもしれない、という話

私は、コードの表示用にプラグイン「SyntaxHighlighter evolved」を使っているのですが、最近、「指定のブラシが見つかりませんでした」という警告が出るようになりました。

Safari

続きを読む

#2013

[WordPress.com からレンタルサーバの WordPress へ] github を使って貼りつけたソースコードはプラグイン「oEmbed Gist」をインストールすればOK

WordPress.com にソースコードを貼り付けるとき、[code]等のタグを使う方法もありますが、github を使って貼り付ける方法もあります。github を使ってソースコードを貼り付けていた場合(記事「GitHub を使って、WordPress.com にソースコードを貼る」参照)は、プラグイン「oEmbed Gist」をインストールすれば OK でした。

続きを読む

#2012