Torchlight.dev — The VS Code Compatible Syntax Highlighting API.

Available Themes

We have a huge number of themes available, and we're adding more all the time. If you have a favorite theme that is not listed here, please let me know on Twitter and we can add it! Note that it must be a VS Code theme for us to be able to integrate it.

Every theme has a unique ID by which it is identified. Some themes are optimized for certain languages, so you'll probably want to try a few if you don't have a specific one in mind.

Name Key
Github Light github-light
Light Plus light-plus
Material Theme Lighter material-theme-lighter
Min Light min-light
Slack Theme Ochin slack-theme-ochin
Solarized Light solarized-light
Winter Is Coming Light winter-is-coming-light
Serendipity Light serendipity-light
Dark Plus dark-plus
Github Dark github-dark
Material Theme Darker material-theme-darker
Material Theme Default material-theme-default
Material Theme Ocean material-theme-ocean
Material Theme Palenight material-theme-palenight
Olaolu Olawuyi's Palenight olaolu-palenight
Min Dark min-dark
Monokai monokai
Nord nord
Slack Theme Dark Mode slack-theme-dark-mode
Solarized Dark solarized-dark
One Dark Pro one-dark-pro
Moonlight moonlight
Moonlight II moonlight-ii
Winter Is Coming Dark winter-is-coming-dark
Winter Is Coming Blue winter-is-coming-blue
Synthwave 84 synthwave-84
Fortnite fortnite
Cobalt2 cobalt2
Serendipity Dark serendipity-dark
Dark 404 dark-404
Yellow Delight yellow-delight
Liver Purple liver-purple
Liver Dark liver-dark
Monokuro Blue monokuro-blue
Monokuro Brown monokuro-brown
Monokuro Cyan monokuro-cyan
Monokuro Gray monokuro-gray
Monokuro Green monokuro-green
Monokuro Indigo monokuro-indigo
Monokuro Lime monokuro-lime
Monokuro Orange monokuro-orange
Monokuro Pink monokuro-pink
Monokuro Purple monokuro-purple
Monokuro Red monokuro-red
Monokuro Teal monokuro-teal
Monokuro Yellow monokuro-yellow
Deep Purple deep-purple
Shades of Purple shades-of-purple
Atom One Dark atom-one-dark

Github Light

Key: github-light

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Light Plus

Key: light-plus

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Material Theme Lighter

Key: material-theme-lighter

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Min Light

Key: min-light

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Slack Theme Ochin

Key: slack-theme-ochin

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Solarized Light

Key: solarized-light

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Winter Is Coming Light

Key: winter-is-coming-light

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Serendipity Light

Key: serendipity-light

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Dark Plus

Key: dark-plus

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Github Dark

Key: github-dark

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Material Theme Darker

Key: material-theme-darker

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Material Theme Default

Key: material-theme-default

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Material Theme Ocean

Key: material-theme-ocean

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Material Theme Palenight

Key: material-theme-palenight

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Olaolu Olawuyi's Palenight

Key: olaolu-palenight

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Min Dark

Key: min-dark

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Monokai

Key: monokai

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Nord

Key: nord

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Slack Theme Dark Mode

Key: slack-theme-dark-mode

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Solarized Dark

Key: solarized-dark

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

One Dark Pro

Key: one-dark-pro

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Moonlight

Key: moonlight

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Moonlight II

Key: moonlight-ii

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Winter Is Coming Dark

Key: winter-is-coming-dark

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Winter Is Coming Blue

Key: winter-is-coming-blue

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Synthwave 84

Key: synthwave-84

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Fortnite

Key: fortnite

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Cobalt2

Key: cobalt2

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Serendipity Dark

Key: serendipity-dark

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Dark 404

Key: dark-404

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Yellow Delight

Key: yellow-delight

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Liver Purple

Key: liver-purple

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Liver Dark

Key: liver-dark

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Monokuro Blue

Key: monokuro-blue

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Monokuro Brown

Key: monokuro-brown

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Monokuro Cyan

Key: monokuro-cyan

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Monokuro Gray

Key: monokuro-gray

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Monokuro Green

Key: monokuro-green

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Monokuro Indigo

Key: monokuro-indigo

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Monokuro Lime

Key: monokuro-lime

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Monokuro Orange

Key: monokuro-orange

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Monokuro Pink

Key: monokuro-pink

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Monokuro Purple

Key: monokuro-purple

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Monokuro Red

Key: monokuro-red

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Monokuro Teal

Key: monokuro-teal

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Monokuro Yellow

Key: monokuro-yellow

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Deep Purple

Key: deep-purple

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Shades of Purple

Key: shades-of-purple

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})

Atom One Dark

Key: atom-one-dark

1// PHP
2return [
3 'extensions' => [
4 // Add attributes straight from markdown.
5 AttributesExtension::class,
6 
7 // Add Torchlight syntax highlighting.
8 TorchlightExtension::class,
9 ]
10]
1// JavaScript
2const btn = document.getElementById('btn')
3let count = 0
4 
5function render() {
6 btn.innerText = `Count: ${count}`
7}
8 
9btn.addEventListener('click', () => {
10 // Count from 1 to 10.
11 if (count < 10) {
12 count += 1
13 render()
14 }
15})
A Hammerstone, LLC Product.
Built with Love & Care by Aaron in Dallas, Texas.