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
Top comments (1)
Awesome! Thanks for this :)