A Clean Code Box

Have you ever thought of a beautiful way to document your code?
Well I have got a simple way to do it!

here is how it will look:

Very simple but clean and pleasant to look at

If you are looking for the code, add this to your css:

pre {
    padding: 30px;
    background-color: #f5f2f2;
    border-radius: 10px;
    display: inline-block;
}
code {
    padding: 10px;
    background-color: #141414;
    color: white;
    display: block;
    border-radius: 10px;
    box-shadow: 10px 10px 20px grey, -10px -10px 20px white, 5px 5px 5px black inset;
    text-shadow: 5px 5px 5px black, -2px -2px 2px #212121;
}

If you are lazy to insert this css, insert this in your html:

<!--Deperected-->
<link rel="stylesheet" href="https://imagineeeinc.github.io/api/cdn/css/codebox.css">
<!--New from a new source-->
<link rel="stylesheet" href="https://eureka-imagineee-server.github.io/code-snips/css/codebox.css">

and for the html add this:

<pre><code>
-->your code goes here<--
</code></pre>

You can obviously hook it up to a syntax highlighter like highlight js to make it lot cooler and you can always edit the code for your own needs

See the Pen Code Box

Comments

[Gourav Khunger]

Awesome! Thanks for this :)