Hello Dev!

PodjokCorner - Hello Netizen (a.k.a citizen of the net), this is my preparation to give more color for code or script that i will use in this blog, by default blogger does not support syntax highlighting, so we must custom to give our blog support highlighting.

So after searching googling, this is my receipt to achieve my goal,
1. highlightjs.org

2. by default highlightjs.org does not support line number, so we must manual add plugin to show line number. this is plugin line number that i've used

highlightjs-line-numbers.js

Config of Syntax Highlight

<!-- for block of highlight.js and line number -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/tomorrow-night-bright.min.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js'/>
<script src='//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js'/>

<!-- for block of load script highlight and line number -->
<script>hljs.initHighlightingOnLoad();hljs.initLineNumbersOnLoad();</script>

<style>
.hljs{
    line-height: normal;
    font-size: small;
}

/* for block of numbers */
.hljs-ln-numbers {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    text-align: right;
    color: #939393;
    border-right: 1px solid #888463;
    vertical-align: top;
}

/* for block of code */
.hljs-ln td{
    padding-right: 4px;
    padding-left:6px;
}
</style>

Okay, here we've got after add syntax highlighting, just sample to test that my code already support syntax highlighting. nice :)

http

POST /task?id=1 HTTP/1.1
Host: example.org
Content-Type: application/json; charset=utf-8
Content-Length: 137

{
  "status": "ok",
  "extended": true,
  "results": [
    {"value": 0, "type": "int64"},
    {"value": 1.0e+3, "type": "decimal"}
  ]
}

JavaScript

/**
* @author John Smith <john.smith@example.com>
*/
function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) +
             ` class="${cls}"`;
  } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      console.log('undefined');
  }

  return (
    <div>
      <web-component>{block}</web-component>
    </div>
  )
}

export  $initHighlight;

CSS

@font-face {
  font-family: Chunkfive; src: url('Chunkfive.otf');
}

body, .usertext {
  color: #F0F0F0; background: #600;
  font-family: Chunkfive, sans;
  --heading-1: 30px/32px Helvetica, sans-serif;
}

@import url(print.css);
@media print {
  a[href^=http]::after {
    content: attr(href)
  }
}

Okay so far, i've satisfied with current configuration.

image cover by www.herosoftmedia.co.id