はてなブログでソースコードの表示をわかりやすくするカスタマイズ

2017年9月11日

当ページのリンクには広告が含まれています。

f:id:c-miya:20170911153632j:plain
このブログでもcssやhtmlのソースコードを掲載することがあるので、それの見た目も少し整えてみようと思います。

ソースコードの表示とシンタックスハイライト

はてなブログにおいてソースコードを表示するには、「はてな記法」と「Markdown」で書くのが便利です。それぞれ、簡単な記法でソースコードをうまく表示してくれるほか、言語ごとに色付きで表示（シンタックスハイライト）することができます。

はてな記法の場合

はてな記法の場合、該当のコードの前後を>||と||<で挟めばOKです。また、最初の>||の|と|の間に言語名を入れると、それぞれの言語に応じた色付きの表示（シンタックスハイライト）で表示されます。

表示例：

>|html|

<header id="blog-title" data-brand="hatenablog">

<div id="blog-title-inner" >

<div id="blog-title-content">

<h1 id="title"><a href="http://www.foxism.jp/">FOXISM</a></h1>

</div>

</div>

</header>

||<

実際の表示

<header id="blog-title" data-brand="hatenablog">
<div id="blog-title-inner" >
<div id="blog-title-content">
<h1 id="title"><a href="http://www.foxism.jp/">FOXISM</a></h1>
</div>
</div>
</header>

Markdownの場合

はてな記法の場合、該当のコードの前後を```で挟めばOKです。また、最初の>```の後に言語名を入れると、それぞれの言語に応じた色付きの表示（シンタックスハイライト）で表示されます。

表示例：

```

<header id="blog-title" data-brand="hatenablog">

<div id="blog-title-inner" >

<div id="blog-title-content">

<h1 id="title"><a href="http://www.foxism.jp/">FOXISM</a></h1>

</div>

</div>

</header>

```

実際の表示は上のはてな記法での例と同じです。

cssでカスタマイズ

はてなブログの標準では、このコードの部分の表示は色付けされる以外は特に見た目の変化はありません。（このブログでは既にカスタマイズしているので見た目は異なります。）

このコード部分の表示を少しカスタマイズしてみましょう。

パターン1：灰背景

単純に薄い背景と枠線を足して他の文章と見分けやすいように。

<header id="blog-title" data-brand="hatenablog">
<div id="blog-title-inner" >
<div id="blog-title-content">
<h1 id="title"><a href="http://www.foxism.jp/">FOXISM</a></h1>
</div>
</div>
</header>

css

pre.code{
margin: 0 0 1.5em 0;
padding: 1em;
border: 1px solid #e4e4e4;
background: #f8f8f8;
border-radius: 2px;
}

パターン2：黒背景

黒背景に。colorでデフォルトカラーを白系統にするのを忘れずに。

<header id="blog-title" data-brand="hatenablog">
<div id="blog-title-inner" >
<div id="blog-title-content">
<h1 id="title"><a href="http://www.foxism.jp/">FOXISM</a></h1>
</div>
</div>
</header>

css

pre.code{
margin: 0 0 1.5em 0;
padding: 1em;
border: 4px solid #999;
background: #333;
color: #eee
}

パターン3：言語名表示

表示する言語ごとにその言語名を左上に表示。

<header id="blog-title" data-brand="hatenablog">
<div id="blog-title-inner" >
<div id="blog-title-content">
<h1 id="title"><a href="http://www.foxism.jp/">FOXISM</a></h1>
</div>
</div>
</header>

#content-inner{
display:-webkit-flex;
display: flex;
background: -webkit-repeating-linear-gradient(65deg, #f8f8f8, #f8f8f8 4px, #fff 2px, #fff 8px);
background: repeating-linear-gradient(65deg, #f8f8f8, #f8f8f8 4px, #fff 2px, #fff 8px);
}
.entry-content h2{
font-size: 1.7rem;
padding: 1em 0 0.5em 0;
position: relative;
}

css

pre.code{
margin: 0 0 1.5em 0;
padding: 1.6em 1em 1em;
border:1px solid #ccc;
background:#f8f8f8;
position:relative;
}

パターン4：言語ごとに色分け

表示している言語を左上に表示するとともに、その部分を言語ごとにに色分け。

<header id="blog-title" data-brand="hatenablog">
<div id="blog-title-inner" >
<div id="blog-title-content">
<h1 id="title"><a href="http://www.foxism.jp/">FOXISM</a></h1>
</div>
</div>
</header>

#content-inner{
display:-webkit-flex;
display: flex;
background: -webkit-repeating-linear-gradient(65deg, #f8f8f8, #f8f8f8 4px, #fff 2px, #fff 8px);
background: repeating-linear-gradient(65deg, #f8f8f8, #f8f8f8 4px, #fff 2px, #fff 8px);
}
.entry-content h2{
font-size: 1.7rem;
padding: 1em 0 0.5em 0;
position: relative;
}

css

pre.code{
margin: 0 0 1.5em 0;
padding: 1.6em 1em 1em;
border: 1px solid #ccc;
background: #f8f8f8;
position: relative;
}
pre.code{
margin: 0 0 1.5em 0;
padding: 1.6em 1em 1em;
background: #333;
color: #eee;
position: relative;
border-radius: 0;
}
pre.code::before{
content: attr(data-lang);
position: absolute;
top: 0;
left: 0;
background: #666;
padding: 0 0.8em;
}
pre.lang-html::before{
background: #00796b;
color: #e0f2f1;
}
pre.lang-css::before{
background: #ffa000;
color: #fff8e1;
}

パターン5：入力する場所ごとに色分け

はてなブログの場合、どこにそのコードを入力するのかといったことを指定する場合があるので、それをわかりやすく。

<header id="blog-title" data-brand="hatenablog">
<div id="blog-title-inner" >
<div id="blog-title-content">
<h1 id="title"><a href="http://www.foxism.jp/">FOXISM</a></h1>
</div>
</div>
</header>

#content-inner{
display:-webkit-flex;
display: flex;
}
.entry-content h2{
font-size: 1.7rem;
padding: 1em 0 0.5em 0;
}

html
このカスタマイズの場合は、それぞれのコード部分を<div class="デザインcss">～<div>などで囲んでいます。

css

pre.code{
margin:0 0 1.5em 0;
padding:2em 1em 1em;
background:#333;
color:#eee;
position:relative;
border-radius:0;
}
pre.code::before{
content: attr(data-lang);
position: absolute;
top: 0;
left: 0;
background: #666;
padding: 0 0.8em;
}
.記事上 pre.code::before{
content: '記事上';
background: #00796b;
color: #e0f2f1;
}
.デザインcss pre.code::before{
content: 'デザインcss';
background: #ffa000;
color: #fff8e1;
}