[example] code block • /var/log/little-things

Diff

import useSWR from 'swr'
 
function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)
 
-  if (error) return <div>failed to load</div>
+  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

Filter meta string

const node = '';

Highlighted partial node

/carrot/

function carrot() {
  // comment that contains carrot and other words.
}

function carrot() {
  //carrot carrot contains carrot and other words, carrot
}

function carrot() {
  // carrot
}

function carrot() {
  'carrot';
}

Highlighted line

{1}

const getStringLength = (str) => str.length;

Highlighted lines

{1, 3, 6-8}

const getStringLength = (str) => str.length;
 
const add = (a, b) => a + b;
 
const divide = (a, b) => a / b;
 
const subtract = (a, b) => a - b;
 
const multiply = (a, b) => a * b;

Highlighted multiple word

/carrot/ /return/

function carrot() {
  return 'carrot';
}

Highlighted multiple words

/getStringLength/1-2 /str/1,3

const getStringLength = (str) => str.length;
 
const strLen = getStringLength('str');
 
const anotherStrLen = getStringLength('anotherStr');

Highlighted word

/carrot/

function carrot() {
  return 'carrot';
}

Highlighted words

/getStringLength/1-2

const getStringLength = (str) => str.length;
 
const strLen = getStringLength('str');
 
const anotherStrLen = getStringLength('anotherStr');

/getStringLength/1,3

const getStringLength = (str) => str.length;
 
const strLen = getStringLength('str');
 
const anotherStrLen = getStringLength('anotherStr');

/getStringLength/2,5,6

const getStringLength = (str) => str.length; // getStringLength
 
const strLen = getStringLength('str'); // getStringLength
 
const anotherStrLen = getStringLength('anotherStr'); // getStringLength

/<span class=“test/

<span class="test"></span>

/span class=“test”/

<span class="test"></span>

/test”/

<span class="test"></span>

/“test/

<span class="test"></span>

/“te/

<span class="test"></span>

/st”/

<span class="test"></span>

/st”>/

<span class="test"></span>

/=“te/

<span class="test"></span>

/>/

<>

/</

<>

/<>/

<>

/theme: ‘monokai’/

const options = {
  theme: 'monokai',
};

/ theme: /

const options = {
  theme: 'monokai',
};

/light && fluffy/

const options = {
  theme: light && fluffy ? 'solarized-light' : 'monokai',
};

/car/

const carrotcar,carcarrot;
const orangecarrotcar,orangecarrotcar;

/car,/2

const carrotcar,carcarrot;
const orangecarrotcar,orangecarrotcar;

/,car/1

const carrotcar,carcarrot;
const carrotcar,carcarrot;

/ot,ca/

const carrot,carrot,carrot,carrot;

Highlighted words differently

/age/#a /name/#a /setAge/#b /setName/#b /42/#c /‘Taylor’/#c

const [age, setAge] = useState(42);
const [name, setName] = useState('Taylor');

/<div/#a /id="true">/#b

<div id="true">

/age/#id

const age = 'age';

/age/2

const age = 'age'; // age;

/car/1

const carrotcar,carcarrot;
const carrotcar,carcarrot;

Inline

{:js}

const getStringLength = (str) => str.length;

Keep background

const x = true;

Many line

html {
  --page-color: white;
  --ink-color: black;
}
 
@media (prefers-color-scheme: dark) {
  html {
    --page-color: black;
    --ink-color: white;
  }
}
 
body {
  background-color: var(--page-color);
  color: var(--ink-color);
}
 
input {
  background-color: var(--page-color);
  color: var(--ink-color);
  border-color: var(--ink-color);
}
 
button {
  background-color: var(--ink-color);
  color: var(--page-color);
}

Hyphenated language

pick e0662b2 Improve a11y of the logo image
fixup 41aac9e fixup! e0662b2
pick d3942e9 Use SVG format for the logo
fixup f5409b6 fixup! d3942e9
pick 5dae451 Link logo to the site root

One line

const getStringLength = (str) => str.length;

showLineNumbers

const a = 'a';
const b = 'b';
const c = 'c';

Literal is not highlighted 1

const showLineNumbers = true;

Literal is not highlighted 2

const showLineNumbers = true;

showLineNumbersStartAt

const a = 'a';
const b = 'b';
const c = 'c';

const a = 'a';
const b = 'b';
const c = 'c';

const a = 'a';
const b = 'b';
const c = 'c';

const a = 'a';
const b = 'b';
const c = 'c';

const a = 'a';
const b = 'b';
const c = 'c';

Title

title=“app.js”

app.js

const code = true;

title=“./components/index.js”

./components/index.js

const title = 'components';

title=“./components/{4}.js” /title/

./components/{4}.js

const title = 'components';

undefined

Should not be highlighted

// undefined

Unknown language

test