2m 16s read
Prism code blocks
This is the post in which I test and see how the code blocks should look on the page. They use Prism via the gatsby-remark-prismjs plugin.
Inline code blocks look like this: javascript test.map(c => c.strtoupper());
and css position: sticky
as examples.
This post will either be developed further or removed – its fate is not yet decided!
CSS
:root {
--bg-color: #ffc;
}
html {
/* set background color */
background-color: var(--bg-color);
}
.box:nth-child(odd) {
padding: 0.4rem 0.5rem;
overflow: auto;
box-shadow: rgba(0, 0, 0, 0.03) 0 0.25rem 2rem 0;
}
HTML
<!DOCTYPE html>
<html>
<title>Test</title>
<a href="https://sidp.dev" rel="noopener">Link text</a>
</html>
Javascript
const even = no => no % 2 === 0;
const double = no => no * 2;
const input = [0, 1, 2, 3, 4];// run it
console.log(input.filter(even).map(double));
Typescript
const even = (no: number) => no % 2 === 0;
const double = (no: number) => no * 2;
const input = [0, 1, 2, 3, 4];function run(input: number[]) { return input.filter(even).map(double);
}
// run it
console.log(run(input));