The Clipboard API

Using prism template themes combined with html <pre> and <code> tags allows a coder to control the appearance of their code samples to match the look and feel of their own website while maintaining complete functionality.

For this demo, we are using the prism formatting library and styling it with the "coldark dark" theme.

Themes can be served from https://cdnjs.com/libraries/prism-themes or loaded directly from your own server.

Themes are formatted, colored, and properly highlighted for markup languages like CSS styles...

.style-name {
	min-width: 70%;
	position: relative;
	overflow: auto;
	margin: 5px auto 40px;
	background: black;
	margin-bottom: 1.5rem;
}

...HTML code (properly formatted in the page's source for text display)

	<h3 class="project-title">

		<a href="https://www.duemler.com/code/about.html">
			About The Code Room
		</a>

	</h3>

	<div class="style-name">Some more content</div>

...and javaScript, just to name a few!

  if (navigator.clipboard) {
    let button = document.createElement("button");

    button.innerText = copyButtonLabel;
    block.appendChild(button);