Fancy Code Block

Markup Code Block

1<h2>JSX Heading 2</h2>
2
3<abbr title="HyperText Markup Language">HTML</abbr> is a lovely language.
4
5<section>And here is *markdown* in **JSX**!</section>

1<div># this is not a heading but *this* is emphasis</div>
2
3<div>This is a `p`.</div>

CSS Code Block

1:root {
2  --primary: #1890ff;
3  --secondary: #40a9ff;
4  --light: #f8f9fa;
5  --dark: #343a40;
6  --font-stack: 'Raleway', 'Spectral', 'Noto Serif SC', 'Noto Sans SC',
7    'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
8    'Open Sans', 'Helvetica Neue', arial, sans-serif, serif;
9  --font-size: 18px;
10}
11
12body {
13  width: 100%;
14  font-family: var(--font-stack);
15  font-size: var(--font-size);
16}

TypeScript Code Block

1const foo = function (bar) {
2  return bar++;
3};
4
5foo(5);
6
7some.code();

1{
2  (function () {
3    const guess = 0.44;
4
5    if (guess > 0.66) {
6      return <span style={{ color: 'tomato' }}>Look at us.</span>;
7    }
8
9    if (guess > 0.33) {
10      return <span style={{ color: 'violet' }}>Who would have guessed?!</span>;
11    }
12
13    return <span style={{ color: 'goldenrod' }}>Not me.</span>;
14  })();
15}