ロゴ

2019.9.2

hilite.meでハイライトされたコードのデザインをカスタマイズする

「もうやり方知ってるからさっさとカスタマイズさせろ」な人はこちら

はじめに

オンライン上でコードのハイライトができる便利サービス、hilite.me。デフォルトでハイライトされたコードはこんな感じの見た目になります。

1
2
3
4
5
6
7
8
<section class="article-h1_c">
  <p class="breadcrumbs_c">
    <a href="https://note.mu/ryoo_ss_ex1" target="_blank" class="breadcrumbs">記事一覧</a>
    <a href="" target="_blank" class="breadcrumbs">技術的なこと</a>
  </p>
  <p class="article-postDate">2019.9.2</p>
  <h1>hilite.meでハイライトされたコードのデザインをカスタマイズする</h1>
</section>

それを、下のように僕好みのデザインにカスタマイズしました。

1
2
3
4
5
6
7
8
<section class="article-h1_c">
  <p class="breadcrumbs_c">
    <a href="https://note.mu/ryoo_ss_ex1" target="_blank" class="breadcrumbs">記事一覧</a>
    <a href="" target="_blank" class="breadcrumbs">技術的なこと</a>
  </p>
  <p class="article-postDate">2019.9.2</p>
  <h1>hilite.meでハイライトされたコードのデザインをカスタマイズする</h1>
</section>

1分足らずでこのようにデザイン変更できるようにツール化しました。下でその手順を紹介します。なお、ハイライトできる言語はHTMLとCSSのみです。

手順

  1. http://hilite.me/に飛ぶ
  2. 「Source code」にハイライトしたいコードをコピペ。「Language」で言語を選択。「Style」で「monokai」を選択。「Line numbers」にチェック。「CSS」に「none」。全て設定し終わったら「Highlight!」をクリック。

    hilite.meでの設定
  3. 生成されたコードを下にコピペ

  4. 下のコードをコピーして、コードを表示させたい場所に貼り付ける

    コードをコピーする
  5. コードのフォントを読み込むために、下のコードをheadタグにコピペ

    linkタグをコピーする
  6. 以下のCSSをコピペ ちなみに、下のCSSのコードはここで紹介している手順通りに作ったもの

    CSSをコピーする
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    *,
    ::before,
    ::after {box-sizing: border-box;}
    .hilight_c {
      padding: 20px 0 20px 10px;
      background: #373737;
      overflow: auto;
    }
    [class^="hilight-"][class$="_c"] {
      font-family: 'Roboto Mono', monospace;
      line-height: 1.5;
    }
    .hilight-lineNum_c {
      color: #a9aaa5;
      padding-right: 5px;
      border-right: 1px solid #4b4b4b;
      margin: 0 4px 0 0;
    }
    .hilight-code_c {
      color: #fff;
      padding-right: 1.5rem;
      margin: 0;
    }
    .hilight-tag {color: #f92672;}
    .hilight-classId {color: #a6e22e;}
    .hilight-property {color: #50b5cf;}
    .hilight-quot {color: #e6db5c;}
    .hilight-val {color: #ae81dc;}
    
  7. 完璧にハイライトされているわけではありません。ところどころハイライトがおかしいところがあるかもしれません。そこは自力で直します。

お問い合わせ

もっと詳しくお聞きしたい点、ご不明な点等何かございましたらお気軽にご連絡ください。連絡手段はなんでも構いません。僕にコンタクトを取る手段はたくさんあるので、お好きなものをお使いください。ただ、レスポンスが早いのはTwitterのDMかココナラのDMだと思います。