Featured image for Cool Code

Cool Code

profile.png
leo
wrote on April 20, 2022

*Updated on May 8, 2022

A post containing code demoing syntax highlighting.

Note: The following code is only for demonstrative purposes. It's not meaningful in any way.

code blocks

Single line

Here's html, js, powershell, and shell in single line code blocks.

Multi line

Here's a multiline code block.

html
js
css
powershell
shell

This is a third level heading

This is a third level heading

This is a fourth level heading

This is a fourth level heading
This is a fifth level heading
This is a fifth level heading
This is a sixth level heading
This is a sixth level heading

Syntax highlighting

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://hello.world/css/foo.css" type="text/css"/>
    <title>hello world</title>
</head>
<body>
    <div class="hello">hello</div>
    <span style="background: url('world.png');">world</span>
    <a href="/world" target="_self" data-hello="world">hello world</a>
    <h1 class="world">&lt;: hello world :&gt;</h1>
    <p>world</p>
    <ul>
        <li>hello</li>
        <li>world</li>
    </ul>
    <ol>
        <li>hello</li>
        <li>world</li>
    </ul>
</body>
</html>

js

"use strict";

const a = true;
const b = 123;;
const c = "hello world";
const d = [
    "hello",
    "world"
];
const e = {
    "hello": "world",
    "123": "bar"
};
var f = function(foo) {
    return true;
};
function g() {
    console.log(`a: ${a}, b: ${b}, c: ${c}, d: ${d}, e: ${e}, f: ${f()}`);
}
g();

if (true) {
    console.log(false);
}
if ("1" == "1") {
    console.log(true);
}

var h = {
    "i": 0
};
var timer = setInterval(function() {
    h.i++;
    console.log(h.i);
    if (h.i == 5) {
        clearInterval(timer);
        i();
    }
}, 1000);

function i() {
    if (h.i) {
        console.log('done');
    }else {
        console.log('not done');
    }
}

css

@font-face {
  font-family: 'Hello world';
  font-style: normal;
  font-weight: 300;
  src: url(/hello/world.ttf) format('truetype');
}

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
html {
    margin: 0;
}
body {
    margin: 0;
}
hello {
    display: block;
    width: 77px;
}
hello world {
    display: inline-block;
    width: 7px;
}
.foo {
    display: inline;
    font-size: 77px;
    line-height: 1;
}

powershell

Set-StrictMode -Version Latest

$a = $null
$b = $true
$c = 123
$d = "hello world"
$e = @(
    'hello'
    123
)
$f = @{
    hello = 'world'
    '123' = 'bar'
}
function g {
    $d -split " "
    $e -join ","
    "a: $a, b: $b, c: $c, d: $d, e: $e, f: $f" | Write-Host
    $f.Keys | % {
        "$_" | Write-Host
    }
    $f.GetEnumerator() | % {
        "Key: $( $_.Name )" | Write-Host -ForegroundColor blue
        "Value: $( $_.Value )" | Write-Host -ForegroundColor green
    }
}
g

if ($true) {
    $false
}
"1" | Where-Object { $_ -eq "1" } | ForEach-Object { $true }

$i = 0
while ($i -lt 5) {
    Start-Sleep -Seconds 1
    $i++
}

if ($i) {
    'done'
}else {
    'not done'
}

shell

#/bin/sh
set -eu

a=123
b=${b:-hello world}
c=$( cat - <<'EOF'
hello
world
EOF
)
d() {
    echo "a: $a, b: $b, c: $c, d: $d"
}
d

if true; then
    false
fi
echo 1 | grep 1 && true || false
i=0
while [ "$i" -lt 5 ]; do
    sleep 1;
    i=$(( $i + 1 )
done

if [ "$i" -gt 0 ]; then
    echo 'done'
else
    echo 'not done'
fi