Warning: include(/home/mryoo/ryo.dev/public_html/parts/header/header1.php): failed to open stream: No such file or directory in /home/mryoo/ryo.dev/public_html/service/hilite.me-customization/index.php on line 87

Warning: include(): Failed opening '/home/mryoo/ryo.dev/public_html/parts/header/header1.php' for inclusion (include_path='.:/opt/php-7.2.27/data/pear') in /home/mryoo/ryo.dev/public_html/service/hilite.me-customization/index.php on line 87

Customize the design of the highlighted code with hilite.me

Introduction

hilite.me is a convenient service that allows you to highlight codes online. The default highlighted code looks like this:

1
2
3
4
5
6
7
<nav class="tableOfContents" aria-label="table of contents">
  <ol>
    <li class="lh1"><a href="#s1" class="tableOfContents-link">Introduction</a></li>
    <li class="lh1"><a href="#s2" class="tableOfContents-link">Procedure</a></li>
    <li class="lh1"><a href="#s3" class="tableOfContents-link">Contact Me</a></li>
  </ol>
</nav>

I customized it to my favorite design as shown below.

1
2
3
4
5
6
7
<nav class="tableOfContents" aria-label="table of contents">
  <ol>
    <li class="lh1"><a href="#s1" class="tableOfContents-link">Introduction</a></li>
    <li class="lh1"><a href="#s2" class="tableOfContents-link">Procedure</a></li>
    <li class="lh1"><a href="#s3" class="tableOfContents-link">Contact Me</a></li>
  </ol>
</nav>

I made a service that allows us to change the design in less than a minute. Below are the steps. The only languages that can be highlighted are HTML and CSS. Also, I think that there are rare cases of code highlighting on smartphones, so it may not work well on smartphones.

Procedure

  1. Go to http://hilite.me/
  2. Copy and paste the code you want to highlight in “Source code”. Select HTML or CSS in "Language". Select “monokai” in “Style”. Check "Line numbers". “CSS” is “none”. Click “Highlight!” When all settings are complete.

    Setting screen in hilite.me
  3. Copy and paste generated code below

  4. Copy the code below and paste it where you want the code to appear

  5. Copy the code below into the head tag to load the code font.

  6. Copy and paste the following 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
    29
    html {-webkit-text-size-adjust: 100%;}
    *,
    ::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. It is not completely highlighted. There may be some strange highlights. Please fix it on your own.

Contact Me

If you have any questions, please feel free to contact us via email or DM on Twitter.


Warning: include(/home/mryoo/ryo.dev/public_html/parts/footer/footer1.html): failed to open stream: No such file or directory in /home/mryoo/ryo.dev/public_html/service/hilite.me-customization/index.php on line 240

Warning: include(): Failed opening '/home/mryoo/ryo.dev/public_html/parts/footer/footer1.html' for inclusion (include_path='.:/opt/php-7.2.27/data/pear') in /home/mryoo/ryo.dev/public_html/service/hilite.me-customization/index.php on line 240