How do I highlight code here? Well, first of all I import Google code-prettify script, basically every post in this blog starts with the line:
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>To add some Swift code, like this:
let reality = true, I use the code tag:
<code class="prettyprint lang-swift">let reality = true</code>
Here prettyprint feeds our code block to the prettifier and lang-swift is a language hint. In this Stackoverflow answer you can find a list of possible hints.I apply custom CSS to the
code block. In Blogger you can do it following the next path: Theme > Customize > Advanced > Add CSS.
code {
white-space: pre-wrap; // Required to keep formatting, still can wrap long lines
font-size: 15px;
line-height: 100%;
background-color: #f8f7f1;
padding: 4px 2px 4px 1px;
}
Additionally, to create nice code blocks like above, I use the block class:
code.block {
display: block;
padding: 0.4em 0.15em 0.4em 0.15em;
margin: 0.4em 0 0.4em 0;
}
