A-Code Web Component

indent

highlight

palette

line-numbers

true

false

inline

#! hashbang /** * @function foo * @description Does foo things * * @param {HTMLElement} element An HTML element */ function foo (element) { let bar, output = ''; const baz = "boom"; const result = document.querySelector('#result'); const bing = ["one", "123.456", -12.5, +100, "3px", 2^3, 2.5e3, 1.2E-3, 1**2, 0x123, 0xFAF]; bar = 2 * 3; // This is a comment /*Another comment*/ for (const child of element.children) { for (const attr of child.attributes) { output += ` ${attr.name} -> ${attr.value}\n

Some text

`; } } someElement.addEventListener ( 'click', event => { console.log(event); } ); const func = (arg) => arg.toLowerCase(); return output; } class MyClass { @foo sayHello(name) { return `Hello, ${name}!`; } }

indent

highlight

palette

line-numbers

true

false

inline

/* Another
								Comment */

body {
								--var1: rgb(250, 250, 250);
								--var2: #f2f2f2;
								--var3: white;
								--argument: hsl(32, 93%, 66%);

background: var(--var1);
								font-family: sans-serif;
								font-size: 16px;
							  height: 100%;
							  letter-spacing: .1rem;
								padding: 1rem;
							}

@media (prefers-color-scheme: dark) {
								body {
							    --var1: rgb(20, 20, 20);
								}

* { padding: 0; }
							}

@media (max-width: 300px) {
								* { padding: 0; }
							}

section,
							  summary
							  { background-color: var(--bg2) }

summary:hover,
							  details[open] > summary
							  {
							  	background-image: linear-gradient(
							  		to bottom,
							  		#008000,
							  		rgb(0, 128, 0) 0 10%,
							  		rgba(0, 128, 0, 0.5) 10% 20%,
							  		hsl(120, 100%, 25.098%) 30%,
							  		hwb(120 0% 49.804%),
							  		color(a98-rgb 0.28137 0.49802 0.11675),
							  		lab(46.278 -47.552 48.586),
							  		#333 50%
							  	),
							  	linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
								}

section[data-foo="bar"] {
									margin: 0 auto 1rem auto;
									padding: 1rem;
								}

div::before{
									content: "*";
								}

div::after {
									content: "";
								}
						</style>

<p class="some-class">Some Text</p>
						<div>
							<label for="test-number" data-foo="" id=foo>Number</label>

<a-code highlight="html">
							<article>
								<h1>A Title</h1>
								<p class="foo">Some text</p>
							</article>
						</a-code>

A-Code Web Component

Demo

Examples

Inline Code

Indent (integer)

Indent (css length)

Add line numbers

Highlight HTML/CSS

Highlight using Keyword

Highlight Code using Url

Prevent code execution: Wrap code in textarea

Nested Textareas: escape slashes in nested closing tags with a backslash