Display Custom Code Snippets on Your Website

If you’re a developer, designer, programmer, or any other title that may require displaying your code on the frontend of your website, this article may be for you.

We’ve all had to do a Google search to find out how to do some sort of CSS, javascript, php, etc. Chances are, you’ve seen the a code snippet displayed on the frontend of a website.

Most frameworks (like Bootstrap) have pre-built styles they attribute to <code></code> tags, but they are all very boring.

How do I display code on my website?

Simply put, using the <code> </code> element shows code without it being attributed to the pages elements.

Here is an example of Bootstrap’s default styling for the <code></code> attribute.

That shit is boring.

Changing the background only effects the text displayed, but there is a simple solution.

The most common method is to wrap the <code></code> attribute in a <pre></pre> (preforamatted text element) .

Doing this allows you to style the background of the entire element rather than just the text.

Here is an example:

pre {

    background: #1C1E2C;

    border: 0px;

    width: 100%;

    padding: 40px;

    color: #fff;

    width: 100%;

    font-size: 18px;

    line-height: 29px

}

The CSS styling displayed within that snippet is the taken directly from our CSS.