🕺 Extremely Lightweight:codeblock.css is only 263 bytes big. Yep, only 263.
🌐 Works Everywhere:codeblock.css uses nothing except pure-CSS that works everywhere on every browser.
📱 Responsive:codeblock.css works even on mobiles and small screens.
🎨 Themeable: Theme it however you want. Change the font, the background, the foreground, the title...anything.
😐 Simple:codeblock.css does not make you learn anything new. All you have to do is assign ids to HTML elements. That's it.
⚙️ So simple, even GitHub can handle it (if it supported inline styles :D).
Simply add this in your <head>:
<linkrel="stylesheet" href="https://unpkg.com/codeblock.css" />The most simplest way of using codeblock.css is:
<divclass="code"><spanclass="lang">html</span><pre> const validateNumber = n => !isNaN(parseFloat(n)) && isFinite(n) && Number(n) == n; validateNumber('10'); // true</pre></div>You will get something like this:
If you'd like to add a title to the code block, you'll have to do this:
<divclass="code"><divclass="info"><spanclass="title">unfold</span><spanclass="lang">javascript</span></div><pre> const unfold = (fn, seed) =>{let result = [], val = [null, seed]; while ((val = fn(val[1]))) result.push(val[0]); return result}; var f = n => (n > 50 ? false : [-n, n + 10]); unfold(f, 10); // [-10, -20, -30, -40, -50]</pre></div>Which will look like this:
By default, codeblock.css uses these variables for theming:
--code-bg:#ededed; --code-fg:#000; --code-title-fg:#7b7b7b; --code-lang-fg:#6b6b6b; --code-font: monospace;You can modify these to your heart's content to get the desired effect.
There are also some themes in the /themes directory which you can directly link to by adding this to your <head>:
<linkrel="stylesheet" href="https://unpkg.com/codeblock.css/themes/<theme-name-here>.css" />Copyright (c) 2020 Abdullah Atta under MIT.