ソースコードを読みやすく色分けする

Google Code Prettify

このサイトに掲載しているソースコードを色分けしてみた。Web制作などでいろんなサイトを参考にしてるとソースコードが読みやすく色分けされてるので、どうやってるのかな？と調べてみたら Google Code Prettify というものがあった。

見やすくなる！

こうだったのが…

.header, .content, .footer, .sidebar {
  border: 2px solid #000;
}
@media screen and (min-width : 501px) { /* 500px以下だったら無効 */
  .wrapper {
    display: table;
    width: 100%;
  }
  .wrapper .content {
    display: table-cell;
    vertical-align: top; /* 縦位置を揃える */
  }
  .wrapper .sidebar {
    width: 200px; /* サイドバーのサイズ */
  }
}

　

こうなる！

.header, .content, .footer, .sidebar {
  border: 2px solid #000;
}
@media screen and (min-width : 501px) { /* 500px以下だったら無効 */
  .wrapper {
    display: table;
    width: 100%;
  }
  .wrapper .content {
    display: table-cell;
    vertical-align: top; /* 縦位置を揃える */
  }
  .wrapper .sidebar {
    width: 200px; /* サイドバーのサイズ */
  }
}

自分のやった方法

またもやGoogleさんの力を借りることになる。ソースコードの表示のされ方を調整したいので必要物を自サイトに置く方式にした。

ソースコードの表示のされ方は「prettify.css」で決まるが、skinsフォルダに入っているCSSを使うこともできる。こちらに、各CSSがどのように見えるかサンプルがある。

Gallery of themes for code prettify

自分は「Sunburst」を使うことにした。その場合、prettify.css は使わず、sunburst.css を使う。

そして、このサイトではCSSの記述を掲載することが多いので、lang-css.js を入れた。

  • htmlのheadへ以下のように記述する

<link rel="stylesheet" href="prettify/skins/sunburst.css">

  • htmlのbodyの最後付近へ以下のように記述する

<script src="prettify/prettify.js"></script>
<script src="prettify/lang-css.js"></script>
<script>
  window.addEventListener("load", function() {
    PR.prettyPrint();
  });
</script>

ソースコードの表示部分

  • 記事のコード表記部分を <pre> か <code> で囲み、classに prettyprint を記述する
    コードがCSSであれば、 lang-css も記述する

<pre class="prettyprint lang-css">
body  {
  font-family:'Noto Sans JP', sans-serif;  /* Webフォント */
  color:#2F2F2F;
}
</pre>

  • 以下のように表示される

body  {
  font-family:'Noto Sans JP', sans-serif;  /* Webフォント */
  color:#2F2F2F;
}

  • 行番号を表示するには、linenums を記述する

<pre class="prettyprint lang-css linenums">
body  {
  font-family:'Noto Sans JP', sans-serif;  /* Webフォント */
  color:#2F2F2F;
}
</pre>

  • 行番号を1行ごとに表示するには、CSSへ以下のように記述しておく必要がある

.prettyprint ol.linenums > li {
  list-style-type: decimal;
}

こうしてみた

sunburst.css を開くと、そのままでは改行が詰められて見にくいので、以下のように改行した後、各所を調整した。

code .str,pre .str{
color:#65B042
}
code .kwd,pre .kwd{
color:#E28964
}
code .com,pre .com{
color:#AEAEAE;
font-style:italic
}
code .typ,pre .typ{
color:#89bdff
}
code .lit,pre .lit{
color:#3387CC
}
code .pln,code .pun,pre .pln,pre .pun{
color:#fff
}
code .tag,pre .tag{
color:#89bdff
}
code .atn,pre .atn{
color:#bdb76b
}
code .atv,pre .atv{
color:#65B042
}
code .dec,pre .dec{
color:#3387CC
}
code.prettyprint,pre.prettyprint{
background-color:#000;
border-radius:8px
}
pre.prettyprint{
width:95%;
margin:1em auto;
padding:1em;
white-space:pre-wrap
}
ol.linenums{
margin-top:0;
margin-bottom:0;
color:#AEAEAE
}
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{
list-style-type:none
}

/* 追記 1行ごとに行番号を表示 */
.prettyprint ol.linenums > li{
list-style-type: decimal;
}

@media print{
code .str,pre .str{
color:#060
}
code .kwd,pre .kwd{
color:#006;
font-weight:700
}
code .com,pre .com{
color:#600;
font-style:italic
}
code .typ,pre .typ{
color:#404;
font-weight:700
}
code .lit,pre .lit{
color:#044
}
code .pun,pre .pun{
color:#440
}
code .pln,pre .pln{
color:#000
}
code .tag,pre .tag{
color:#006;
font-weight:700
}
code .atn,pre .atn{
color:#404
}
code .atv,pre .atv{
color:#060
}
}

ちなみに、htmlをコード表示するとこうなった。htmlの場合は、classに lang-css を記述しない。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="./ColumnChange.css" type="text/css" />
<title>レスポンシブ</title>
</head>
<body>
<div class="header">
  <p>ヘッダー</p>
  <!-- ここにサイトタイトルなどを書く -->
</div>
<div class="wrapper">
  <div class="content">
    <p>コンテンツ</p>
    <!-- ここに記事などを書く -->
  </div>
  <div class="content sidebar">
    <p>サイドバー</p>
    <!-- ここにメニューを置く -->
  </div>
</div>
<div class="footer">
  <p>フッター</p>
  <!--ここにライセンスなどを置く-->
</div>
</body>
</heml>

結果!!

ソースコードが、すごく見やすくなった！

　

　

　

コメント(1)