低所得の青色申告個人事業主のブログ

開業から経験で得た情報をお知らせしていきたいと思います。

= グローバル ナビゲーション =

【無料はてなブログ】ソースコードの貼り付け方【Minimalism】【Brooklyn】【HTML】【見たまま編集】


[ スポンサー リンク ]

適用しているデザインテーマは Minimalism 。

これからBrooklynへ変更予定。

はてなブログには スーパーpre記法 でシンタックス・ハイライトする機能がある。

しかし、はてな記法Markdownかでしか利用できず、見たままでは使用できない。

HTML編集を使いたいので、はてな記法Markdownも困る。

かなり手間だが、スーパーpre記法で生成されたページからhtmlをコピペする手順を覚え書き。

OS は Windows10 、ブラウザは Microsoft Edge 44.17763.1.0 。

 

 

はてな記法ソースコードのページを生成 [シンタックス・ハイライト]

作ろうとしている記事と別の記事をはてな記法で作成して、ソースコードが記述されたページを作る。手順はこのサイトを参照。

jksdaba.hatenablog.com

プレビュー画面で十分。

 

ページからhtmlを取り出す

生成したページ(プレビュー画面)で右クリックし、「ソースの表示」をクリック。

f:id:ACC-DNTST:20190405201614p:plain

ソースの表示

「要素」タブを選択して、「要素の選択(Ctrl + B)」をクリック。

f:id:ACC-DNTST:20190405203738p:plain

要素の選択

ページの中で、htmlを取得したい部分をクリック。

f:id:ACC-DNTST:20190405204059p:plain

ソースコード部分をクリック

htmlが表示されるので、右クリックして「コピー(Ctrl+C)」をクリック。

f:id:ACC-DNTST:20190411102528p:plain

HTMLをコピー

 

htmlコードを貼り付け [HTML編集]

本来ソースコードを貼り付けたい記事の HTML編集 に貼り付ける。

f:id:ACC-DNTST:20190405233307p:plain

HTML編集

f:id:ACC-DNTST:20190405233428p:plain

貼り付け

作成されたページ

f:id:ACC-DNTST:20190405220706p:plain

作成されたページ

 

シンタックス・ハイライトのカスタマイズ

 シンタックス・ハイライトは <pre> ~ </pre> タグで記述される。

背景色や文字色はカスタマイズ可能。

デザイン > カスタマイズ > デザインCSS

/* ソースコード */ 
.entry-content pre{
	background-color: #eeeeee;	/* 背景色 */
 	color: #cccccc;			/* 文字色 */
	font-size: 15px;		/* 文字サイズ */
	line-height: 1.2;		/* 行の高さ */
}
.synSpecial { color: #50aeae; }		/* 特殊文字・記号 */
.synType { color: #cc99cc; }		/* 型 */
.synComment { color: #999999; }		/* コメント */
.synPreProc { color: #50aeae; }		/* プリプロセッサ */
.synIdentifier { color: #cc99cc; }	/* 識別子 */
.synConstant { color: #99cc99; }	/* 定数 */
.synStatement { color: #cc99cc; }	/* ステートメント */