Testing highlight.js

Ruby

    
      variable = "test"
      if variable
        # This will put the content of variable
        puts variable
        result = 1 + 3
        puts result
      end
    
  

PHP

    
      $test = "hello world";
      echo $test;
      $SomeObject = new SomeObject();
    
  

HTML

    
      <link rel="stylesheet" href="/path/to/styles/default.css">
      <script src="/path/to/highlight.min.js"></script>
      <script>hljs.initHighlightingOnLoad();</script>
    
  

Summary

• This page uses CDN version of highlight.js
• CDNS can be used as below:

<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/agate.min.css">
      

• The fist line is the cdn for default theme which is very minimalistic.
• The second one is the kind I like.
• You can find whatever themes you want at the demo page:
• https://highlightjs.org/static/demo/
• I found that "agate" theme looking nice, so I replaced the "default" with "agate" in the URL and use that as the source of CDN for css.
• You need to put the codes below to enable the javascript part:

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
      

• It looks like there is no line number support because it's against the highlight.js's minimalistic principle.
• For me, the highlighted lines are stacked too closely to each other.