Sharing your code

When presenting code on your site, like in an article like this one, you may want to break it apart into snippets to explain it. Here's a method for doing so, with color-coded styling and an option to copy code to the clipboard.

Formatting

Let’s start with how your code looks. Outputting code is typically done within the <code> tag. Use the added <pre> tag around the <code> tag to allow for formatting of spaces used. When outputting HTML code, you’ll need to make sure to convert < and > to < and >.

<pre><code>
  <!-- Example code -->
</code></pre>

Here's styling for using code within text:

code {
  display: inline-block;
  position: relative;
  top: -2px;
  margin-bottom: 2px;
  border-radius: 2px;
  max-width: 100%;
  background-color: #282828;
  padding: 2px 6px 0 6px;
  font-family: "Courier Prime", Courier New, Courier, Helvetica, Arial, serif;
  font-size: 18px;
  color: #eee;
  line-height: 1.2em;
  word-wrap: break-word;
}

And additional code for presenting it in a window.

pre {
  position: relative;
}
code.window {
  display: block;
  margin-bottom: 20px;
  border-radius: 5px;
  width: 100%;
  max-height: 210px;
  padding: 9px 15px 6px 15px;
  overflow-x: scroll;
}

If you want to color your code, the best approach to take is to use a Javascript library that will do it automatically. The one I use is Prism. It comes with predefined color options you can use, but allows modifying them via CSS so you can make it your own. This is the theme I use on this site:

.language-css {
  color: #ac80ff;
}
.token.cdata, .token.comment, .token.doctype, .token.prolog {
  color: #828282;
}
.token.punctuation {
  color: #eeeeee;
}
.token.namespace {
  opacity: .7;
}
.token.constant, .token.deleted, .token.symbol, .token.tag, .token.rule {
  color: #f43274;
}
.token.property {
  color: #59d9f1;
}
.token.boolean, .token.number {
  color: #ae81ff;
}
.token.attr-name, .token.builtin, .token.char, .token.inserted, .token.selector, .token.string {
  color: #a4e405;
}
.language-css .token.string, .style .token.string, .token.entity, .token.operator, .token.url, .token.variable {
  color: #eeeeee;
}
.token.atrule, .token.class-name, .token.function {
  color: #ac80ff;
}
.token.attr-value {
  color: #f5ee7f;
}
.token.css.value {
  color: #ac80ff;
}
.token.keyword {
  color: #f43274;
}
.token.important, .token.regex {
  color: #fd971f;
}

Copy code feature

If you want to add a button for readers to copy your code snippets, you can automate it using some Javascript. Here's a version of code by Rob O'Leary that I modified below that adds a copy code button to each code snippet:

let blocks = document.querySelectorAll("pre");

blocks.forEach(block => {
  let button = document.createElement("a");
  button.classList.add("codecopy");
  button.innerText = "Copy Code";
  block.appendChild(button);

  button.addEventListener("click", async () => {
    await copyCode(block, button);
  });
});

async function copyCode(block, button) {
  let code = block.querySelector('code');
  let text = code.innerText;

  await navigator.clipboard.writeText(text);
  button.innerText = "Copied!";

  setTimeout(() => {
    button.innerText = "Copy Code";
  }, 1000);
}

And the CSS below formats and places it in the corner of your code window:

.codecopy {
  position: absolute;
  right: 4px;
  top: -12px;
  border-radius: 3px;
  border: #282828 1px solid;
  background-color: #e2e2e2;
  padding: 2px 5px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.2em;
  text-decoration: none;
}
.codecopy:hover {
  cursor: pointer;
}

You can see how it all comes together here, on this page.

You can consider labeling each code snippet with the language of the code you're showing, if you feel it necessary.

Further, you can embed an iframe that previews how the code works. Using a widget like CodePen makes it easier to do this along with showing your code.

You can also offer downloading the code. Be sure to include a readme text or Markdown file to go with it. And there's GitHub for sharing the code via a repo.