Syntax highlighting

   · β˜• 2 min read · πŸŽ… Jeus
🏷️
  • #hugo
  • Code Syntax Highlighting

    Verify the following code blocks render as code blocks and highlight properly.

    Diff

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    
    *** /path/to/original	''timestamp''
    --- /path/to/new	''timestamp''
    ***************
    *** 1 ****
    ! This is a line.
    --- 1 ---
    ! This is a replacement line.
    It is important to spell
    -removed line
    +new line
    

    Makefile

    1
    2
    3
    4
    5
    
    CC=gcc
    CFLAGS=-I.
    
    hellomake: hellomake.o hellofunc.o
         $(CC) -o hellomake hellomake.o hellofunc.o -I.
    

    JSON

    1
    2
    3
    
    {"employees":[
        {"firstName":"John", "lastName":"Doe"},
    ]}
    

    Markdown

    1
    2
    3
    
    **bold** 
    *italics* 
    [link](www.example.com)
    

    JavaScript

    1
    
    document.write('Hello, world!');
    

    CSS

    1
    2
    3
    
    body {
        background-color: red;
    }
    

    Objective C

    1
    2
    3
    4
    5
    6
    
    #import <stdio.h>
    
    int main (void)
    {
    	printf ("Hello world!\n");
    }
    

    Python

    1
    
    print "Hello, world!"
    

    XML

    1
    2
    3
    4
    5
    
    <employees>
        <employee>
            <firstName>John</firstName> <lastName>Doe</lastName>
        </employee>
    </employees>
    

    Perl

    1
    
    print "Hello, World!\n";
    

    Bash

    1
    
    echo "Hello World"
    

    PHP

    1
    
     <?php echo '<p>Hello World</p>'; ?> 
    

    CoffeeScript

    1
    
    console.log(β€œHello world!”);
    

    C#

    1
    2
    3
    4
    5
    6
    7
    8
    
    using System;
    class Program
    {
        public static void Main(string[] args)
        {
            Console.WriteLine("Hello, world!");
        }
    }
    

    C++

    1
    2
    3
    4
    5
    6
    7
    
    #include <iostream.h>
    
    main()
    {
        cout << "Hello World!";
        return 0;
    }
    

    SQL

    1
    2
    
    SELECT column_name,column_name
    FROM table_name;
    

    Go

    1
    2
    3
    4
    5
    
    package main
    import "fmt"
    func main() {
        fmt.Println("Hello, δΈ–η•Œ")
    }
    

    Ruby

    1
    
    puts "Hello, world!"
    

    Java

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    
    import javax.swing.JFrame;  //Importing class JFrame
    import javax.swing.JLabel;  //Importing class JLabel
    public class HelloWorld {
        public static void main(String[] args) {
            JFrame frame = new JFrame();           //Creating frame
            frame.setTitle("Hi!");                 //Setting title frame
            frame.add(new JLabel("Hello, world!"));//Adding text to frame
            frame.pack();                          //Setting size to smallest
            frame.setLocationRelativeTo(null);     //Centering frame
            frame.setVisible(true);                //Showing frame
        }
    }
    

    Latex Equation

    1
    
    \frac{d}{dx}\left( \int_{0}^{x} f(u)\,du\right)=f(x).
    
     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
    30
    31
    32
    33
    34
    35
    36
    37
    38
    
    import {x, y} as p from 'point';
    const ANSWER = 42;
    
    class Car extends Vehicle {
      constructor(speed, cost) {
        super(speed);
    
        var c = Symbol('cost');
        this[c] = cost;
    
        this.intro = `This is a car runs at
          ${speed}.`;
      }
    }
    
    for (let num of [1, 2, 3]) {
      console.log(num + 0b111110111);
    }
    
    function $initHighlight(block, flags) {
      try {
        if (block.className.search(/\bno\-highlight\b/) != -1)
          return processBlock(block.function, true, 0x0F) + ' class=""';
      } catch (e) {
        /* handle exception */
        var e4x =
            <div>Example
                <p>1234</p></div>;
      }
      for (var i = 0 / 2; i < classes.length; i++) {
      // "0 / 2" should not be parsed as regexp
        if (checkCondition(classes[i]) === undefined)
          return /\d+[\s/]/g;
      }
      console.log(Array.every(classes, Boolean));
    }
    
    export  $initHighlight;
    
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Hello world</title>
      <link href='http://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
      <link rel="stylesheet" href="index.css" />
    </head>
    <body>
      <div id="app"></div>
      <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>
      <script src="vendor/prism.js"></script>
      <script src="examples.bundle.js"></script>
    </body>
    </html>
    
     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
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    
    /*********************************************************
    * General
    */
    pre[class*="language-"],
    code {
      color: #5c6e74;
      font-size: 13px;
      text-shadow: none;
      font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
      direction: ltr;
      text-align: left;
      white-space: pre;
      word-spacing: normal;
      word-break: normal;
      line-height: 1.5;
      tab-size: 4;
      hyphens: none;
    }
    pre[class*="language-"]::selection,
    code::selection {
      text-shadow: none;
      background: #b3d4fc;
    }
    @media print {
      pre[class*="language-"],
      code {
        text-shadow: none;
      }
    }
    pre[class*="language-"] {
      padding: 1em;
      margin: .5em 0;
      overflow: auto;
      background: #f8f5ec;
    }
    :not(pre) > code {
      padding: .1em .3em;
      border-radius: .3em;
      color: #db4c69;
      background: #f9f2f4;
    }
    
    Share on

    Paul Applegate
    WRITTEN BY
    Jeus
    Photographer