sidp.dev

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));