Highlight Testing
Test the highlight feature in this website.
Special chars: ⟶☐☑○◉⿻⨇⇜⇝⇗
External icon ⇗ vs external link.
C#:
using System.IO.Compression;
#pragma warning disable 414, 3021
// Phông chữ phù hợp cần hỗ trợ tất cả các ký tự của tiếng Việt,
// để đảm bảo khả năng hiển thị chính xác trên các hệ điều hành,
// thiết bị, cũng như trình duyệt khác nhau.
namespace MyApplication
{
[Obsolete("Kiểm tra khả năng tương thích với tiếng Việt...")]
class Program : IInterface
{
public static List<int> JustDoIt(int count)
{
var selected = false;
Span<int> numbers = stackalloc int[length];
Console.WriteLine($"Hello {Name}!");
return new List<int>(new int[] { 1, 2, 3 })
}
}
}Razor (cshtml):
@{
string message = "foreignObject example with Scalable Vector Graphics (SVG)";
}
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" rx="10" ry="10" width="200" height="200" stroke="black"
fill="none" />
<foreignObject x="20" y="20" width="160" height="160">
<p>@message</p>
</foreignObject>
</svg>
<!-- @do while -->
@{ var i = 0; }
@do
{
var person = people[i];
<p>Name: @person.Name</p>
<p>Age: @person.Age</p>
i++;
} while (i < people.Length);
<!-- From https://learn.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-7.0 -->JSON:
[
{
"title": "apples",
"count": [12000, 20000],
"description": {"text": "...", "sensitive": false}
},
{
"title": "oranges",
"count": [17500, null],
"description": {"text": "...", "sensitive": false}
}
]CSS:
@font-face {
font-family: Chunkfive;
src: url('Chunkfive.otf');
}
body,
#target,
.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);
}
}HTML:
<!DOCTYPE html>
<title>Title</title>
<style>body {width: 500px;}</style>
<script type="application/javascript">
function $init() {return true;}
</script>
<body>
<p checked class="title" id='title'>Title</p>
<!-- here goes the rest of the page -->
</body>Javascript:
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');
}
}
export $initHighlight;Typescript:
// Using 'typeof' to infer types
const person = { name: "Alice", age: 30 };
type PersonType = typeof person; // { name: string; age: number }
// 'satisfies' to ensure a type matches but allows more specific types
type Animal = { name: string };
const dog = { name: "Buddy", breed: "Golden Retriever" } satisfies Animal;
// Generics with 'extends' and default values
function identity<T extends number | string = string>(arg: T): T {
return arg;
}
let str = identity(); // Default type is string
let num = identity(42); // T inferred as number
// 'extends' with interface and class
interface HasLength {
length: number;
}
function logLength<T extends HasLength = string>(arg: T): void {
console.log(arg.length);
}
logLength("Hello"); // OK: string has length (default is string)
logLength([1, 2, 3]); // OK: array has length
// logLength(123); // Error: number doesn't have length
// 'typeof' with functions
function add(x: number, y: number): number {
return x + y;
}
type AddFunctionType = typeof add; // (x: number, y: number) => number
// Generic interfaces with 'extends' and default types
interface Box<T extends object = { message: string }> {
content: T;
}
let defaultBox: Box = { content: { message: "Hello" } }; // Uses default type
let customBox: Box<{ status: number }> = { content: { status: 200 } };
// Complex example with 'satisfies' and default generics
type Task = {
title: string;
description?: string;
completed: boolean;
};
const myTask = {
title: "Learn TypeScript",
completed: false,
priority: "High",
} satisfies Task; // Allows priority but ensures Task structure
// Generic function with default type
function wrapInArray<T = string>(value: T): T[] {
return [value];
}
const stringArray = wrapInArray(); // Default to string
const numberArray = wrapInArray(42); // T inferred as number
/**
* Combines two generic types into a tuple.
*
* @template T - The first type.
* @template U - The second type.
* @param {T} first - The first value.
* @param {U} second - The second value.
* @returns {[T, U]} A tuple containing both values.
*/
function combine<T, U>(first: T, second: U): [T, U] {
return [first, second];
}
class MyClass {
public static myValue: string;
constructor(init: string) {
this.myValue = init;
}
}
import fs = require("fs");
module MyModule {
export interface MyInterface extends Other {
myProperty: any;
}
}
declare magicNumber number;
myArray.forEach(() => { }); // fat arrow syntaxTypescript (TSX):
const MyComponent = () => {
return (
<div>
<ChildComponent
data={{ name: 'Name', value: value, order: 1 }}
onClick={handleClick} />
<web-component>{block}</web-component>
<p>Other data</p>
</div>
);
};
// This function gets called at build time on server-side.
export async function getStaticProps() {
const res = await fetch('https://.../posts')
const posts = await res.json()
return {
props: {
posts
}
}
}
export default MyComponent;Batch:
rem
rem Alternate form of if-elseif-else structure with goto for else
rem case. That way, you can group code together in a "more logical"
rem or "more natural" manner.
rem
if .%1 == .1 goto 1
if .%1 == .2 goto 2
goto else
:1
echo You selected 1
goto endif
:2
echo You selected 2
goto endif
:else
echo else (neither 1 nor 2)
goto endif
:endif
:: From https://github.com/Archive-projects/Batch-File-examples/blob/master/files/tf5.batBash:
#!/bin/bash
# weather.sh
# Copyright 2018 computer-geek64. All rights reserved.
program=Weather
version=1.1
year=2018
developer=computer-geek64
case $1 in
-h | --help)
echo "$program $version"
echo "Copyright $year $developer. All rights reserved."
echo
echo "Usage: weather [options]"
echo "Option Long Option Description"
echo "-h --help Show the help screen"
echo "-l [location] --location [location] Specifies the location"
;;
-l | --location)
curl https://wttr.in/$2
;;
*)
curl https://wttr.in
;;
esac
# From https://github.com/ruanyf/simple-bash-scripts/blob/master/scripts/weather.shBash multiple lines mode:
#!/bin/bash
# weather.sh
# Copyright 2025 Tuyen Pham. All rights reserved.
# String, integer, and decimal arguments
echo 'something' && mytool \
--string unquoted-value \
--string "double quote value" \
--string 'single quote value' \
--int 42 \
--decimal 3.14 \
--boolean true \
--flag \
--string=unquoted-value \
--string="double quote value" \
--string='single quote value' \
--int=42 \
--decimal=3.14 \
--decimal=-67.89 \
--boolean=true \
--string:unquoted-value \
--check:-this --string:"double quote value" \
--check-that value \
--string:'single quote value' \
--int:42 \
--decimal:3.14 \
--decimal:-67.89 \
--boolean:true \
-rf \
outputfile.txt
git pull && \
cargo build && \
find \
target/release \
-maxdepth 1 \
-type f \
-regex '.*/[a-zA-Z0-9_-]+' \
-exec \
sudo \
cp \
-v {} \
/usr/local/bin/ \
\;
ffmpeg \
-vsync passthrough \
-hwaccel cuvid \
-c:v h264_cuvid \
-hwaccel_output_format cuda \
-ss 00:01:13.880 \
-to 00:01:34.600 \
-i input.mp4 \
-filter_complex '[0:v]reverse[r];[0:v][r] concat=n=2:v=1 [v]' \
-c:a libopus \
-c:v h264_nvenc \
-temporal-aq 1 \
-rc-lookahead 20 \
-i_qfactor 0.75 \
-b_qfactor 1.1 \
-movflags +faststart \
-y \
'output.mp4'Bash single line mode:
echo 'something' && mytool --string unquoted-value --string "double quote value" --string 'single quote value' --int 42 --decimal 3.14 --boolean true --flag --string=unquoted-value --string="double quote value" --string='single quote value' --int=42 --decimal=3.14 --decimal=-67.89 --boolean=true --string:unquoted-value --string:"double quote value" --string:'single quote value' --int:42 --decimal:3.14 --decimal:-67.89 --boolean:true -rf outputfile.txt
git pull && cargo build && find target/release -maxdepth 1 -type f -regex '.*/[a-zA-Z0-9_-]+' -exec sudo cp -v {} /usr/local/bin/ \;
ffmpeg -vsync passthrough -hwaccel cuvid -c:v h264_cuvid -hwaccel_output_format cuda -ss 00:01:13.880 -to 00:01:34.600 -i input.mp4 -filter_complex '[0:v]reverse[r];[0:v][r] concat=n=2:v=1 [v]' -c:a libopus -c:v h264_nvenc -temporal-aq 1 -rc-lookahead 20 -i_qfactor 0.75 -b_qfactor 1.1 -movflags +faststart -y 'output.mp4'LaTeX:
% \require{extpfeil} % produce extensible horizontal arrows
\begin{array}{ccc} % arrange LPPs
% first row
% first LPP
\begin{array}{ll}
\max & z = c^T x \\
\text{s.t.} & A x \le b \\
& x \ge 0
\end{array}
& \xtofrom{\text{duality}} &
% second LPP
\begin{array}{ll}
\min & v = b^T y \\
\text{s.t.} & A^T y \ge c \\
& y \ge 0
\end{array} \\
({\cal PC}) & & ({\cal DC}) \\
\text{add } {\Large \downharpoonleft} \text{slack var} & & \text{minus } {\Large \downharpoonright} \text{surplus var}\\ % Change to your favorite arrow style
%
% second row
% third LPP
\begin{array}{ll}
\max & z = c^T x \\
\text{s.t.} & A x + s = b \\
& x,s \ge 0
\end{array}
& \xtofrom[\text{some steps skipped}]{\text{duality}} &
% fourth LPP
\begin{array}{ll}
\min & v = b^T y \\
\text{s.t.} & A^T y - t = c \\
& y,t \ge 0
\end{array} \\
({\cal PS}) & & ({\cal DS})
%
\end{array}Mermaid:
sequenceDiagram
box Purple Alice & John
participant A
participant J
end
box Another Group
participant B
participant C
end
A->>J: Hello John, how are you?
J->>A: Great!
A->>B: Hello Bob, how is Charly ?
B->>C: Hello Charly, how are you?Python:
#!/usr/bin/env python
"""Test file for Python syntax highlighting in editors / IDEs.
Meant to cover a wide range of different types of statements and expressions.
Not necessarily sensical or comprehensive (assume that if one exception is
highlighted that all are, for instance).
Extraneous trailing whitespace can't be tested because of svn pre-commit hook
checks for such things.
"""
# Comment
# OPTIONAL: XXX catch your attention
# TODO(me): next big thing
# FIXME: this does not work
# Statements
from __future__ import with_statement # Import
from sys import path as thing
print(thing)
assert True # keyword
def foo(): # function definition
return []
class Bar(object): # Class definition
def __enter__(self):
pass
def __exit__(self, *args):
pass
foo() # UNCOLOURED: function call
while False: # 'while'
continue
for x in foo(): # 'for'
break
with Bar() as stuff:
pass
if False:
pass # 'if'
elif False:
pass
else:
pass
# Constants
'single-quote', u'unicode' # Strings of all kinds; prefixes not highlighted
"double-quote"
"""triple double-quote"""
'''triple single-quote'''
r'raw'
ur'unicode raw'
'escape\n'
'\04' # octal
'\xFF' # hex
'\u1111' # unicode character
1 # Integral
1L
1.0 # Float
.1
1+2j # Complex
# Expressions
1 and 2 or 3 # Boolean operators
2 < 3 # UNCOLOURED: comparison operators
spam = 42 # UNCOLOURED: assignment
2 + 3 # UNCOLOURED: number operators
[] # UNCOLOURED: list
{} # UNCOLOURED: dict
(1,) # UNCOLOURED: tuple
all # Built-in functions
GeneratorExit # ExceptionsSQL:
USE AdventureWorks2022;
GO
IF OBJECT_ID('dbo.NewProducts', 'U') IS NOT NULL
DROP TABLE dbo.NewProducts;
GO
ALTER DATABASE AdventureWorks2022 SET RECOVERY BULK_LOGGED;
GO
SELECT * INTO dbo.NewProducts
FROM Production.Product
WHERE ListPrice > $25
AND ListPrice < $100;
GO
ALTER DATABASE AdventureWorks2022 SET RECOVERY FULL;
GO
-- From https://learn.microsoft.com/en-us/sql/t-sql/queries/select-examples-transact-sqlDiff:
*** file1.txt 2014-08-21 17:58:29.764656635 -0400
--- file2.txt 2014-08-21 17:58:50.768989841 -0400
***************
*** 1,4 ****
apples
- oranges
kiwis
carrots
--- 1,4 ----
apples
kiwis
carrots
+ grapefruitsShell Patch:
*** old.json Sun Jan 18 12:28:30 2026
--- new.json Sun Jan 18 12:28:30 2026
***************
*** 1,6 ****
{
! "displayName": "Shell",
! "name": "shellscript",
"patterns": [
{
"include": "#initial_context"
--- 1,6 ----
{
! "displayName": "Shell Patched",
! "name": "shellscript-patched",
"patterns": [
{
"include": "#initial_context"
***************
*** 1851,1863 ****
"name": "string.unquoted.argument.shell constant.other.option.shell"
}
},
- "contentName": "string.unquoted.argument constant.other.option",
"end": "(?=[\\t ])|(?=[\\n\\&);`{|}]|[\\t ]*#|])(?<!\\\\)",
"endCaptures": {
},
"patterns": [
{
"include": "#option_context"
}
]
},
--- 1851,1911 ----
"name": "string.unquoted.argument.shell constant.other.option.shell"
}
},
"end": "(?=[\\t ])|(?=[\\n\\&);`{|}]|[\\t ]*#|])(?<!\\\\)",
"endCaptures": {
},
"patterns": [
{
+ "begin": "(=|:(?![a-zA-Z]\\\\b))",
+ "beginCaptures": {
+ "1": {
+ "name": "keyword.operator.assignment.option.shell"
+ }
+ },
+ "end": "(?=[\\t \\n\\&);<>`{|}]|[\\t ]*#|])(?<!\\\\)",
+ "patterns": [
+ {
+ "match": "(?<!\\w)\\b(true|false)\\b(?!\\w)",
+ "name": "constant.language.boolean.shell"
+ },
+ {
+ "captures": {
+ "1": {
+ "name": "constant.numeric.shell constant.numeric.hex.shell"
+ },
+ "2": {
+ "name": "constant.numeric.shell constant.numeric.octal.shell"
+ },
+ "3": {
+ "name": "constant.numeric.shell constant.numeric.other.shell"
+ },
+ "4": {
+ "name": "constant.numeric.shell constant.numeric.decimal.shell"
+ },
+ "5": {
+ "name": "constant.numeric.shell constant.numeric.version.shell"
+ },
+ "6": {
+ "name": "constant.numeric.shell constant.numeric.integer.shell"
+ }
+ },
+ "match": "(?<=[\\t =:]|^|[(\\[{])(?:(?:(?:(?:(?:(0[Xx]\\h+)|(0\\d+))|(\\d{1,2}#[0-9@-Z_a-z]+))|(-?\\d+\\.\\d+))|(-?\\d+(?:\\.\\d+)+))|(-?\\d+))(?=[\\t \\n\\&);<>`{|}]|[\\t ]*#|]|$)"
+ },
+ {
+ "include": "#option_context"
+ },
+ {
+ "match": "[^\\t\\n \"$\\&-);<>\\\\`|]+",
+ "name": "string.unquoted.argument.shell"
+ }
+ ]
+ },
+ {
"include": "#option_context"
+ },
+ {
+ "match": "(?:[^\\t=:\\n\\&);`{|}\\s]|:(?=[a-zA-Z]\\b))+",
+ "name": "string.unquoted.argument constant.other.option"
}
]
},Snippet:
<div>
A sample content
</div>* {
color: var(--danger);
}(() => {
const element = document.createElement('p');
element.textContent = 'Created dynamically using Javascript!';
document.body.appendChild(element);
})();Below animation is HTML/CSS/JS code injected directly into the page: