Blogger | how to style your code blocks ( Syntax highlighting )

 

Follow these steps to add prism to your blogger theme so that you can get the desired code block syntax coloring

1- go to your blogger admin and open the theme settings

 

 

 

2- Modify the Theme HTML pressing the "arrow" sign in Customize button and then selecting "Edit HTML"

 

 

 

3- search for "</header>" tag in the code to by pressing Ctr+F and past the code below b4 it:

<!-- prism-header to include b4 header end -->
<link href='https://cdn.jsdelivr.net/npm/prismjs@1.20.0/themes/prism.css' rel='stylesheet'/>
<link href='https://cdn.jsdelivr.net/npm/prismjs@1.20.0/themes/prism-okaidia.css' rel='stylesheet'/>
<link href='https://cdn.jsdelivr.net/npm/prismjs@1.20.0/plugins/line-numbers/prism-line-numbers.css' rel='stylesheet'/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/plugins/toolbar/prism-toolbar.min.css"/>

 

Then scroll to the bottom of the page and add this code b4 the </html> tag:

<!-- prism-footer to include b4 body end -->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/prism.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/plugins/autoloader/prism-autoloader.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/plugins/toolbar/prism-toolbar.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/components.js"></script>
<script src="https://prismjs.com/assets/vendor/utopia.js"></script>
<script src="https://prismjs.com/assets/code.js"></script>
<script>
Prism.plugins.toolbar.registerButton('select-all', function(env) {
    var button = document.createElement('button');
    button.innerHTML = 'select all';
    button.addEventListener('click', function () {
        // Source: http://stackoverflow.com/a/11128179/2757940
        if (document.body.createTextRange) { // ms
            var range = document.body.createTextRange();
            range.moveToElementText(env.element);
            range.select();
        } else if (window.getSelection) { // moz, opera, webkit
            var selection = window.getSelection();
            var range = document.createRange();
            range.selectNodeContents(env.element);
            selection.removeAllRanges();
            selection.addRange(range);
        }
    });
    return button;
});
</script>

 

 

4-  Enhance <pre> warp for code block view by going to Theme > Customize:

Then go to Advance

add this code in your blogger theme > customize > advanced > add css:

pre {
    overflow-x: auto !important;
    white-space: pre-wrap !important;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -pre-wrap !important;      /* Opera 4-6 */
    white-space: -o-pre-wrap !important;    /* Opera 7 */
    word-wrap: break-word !important;       /* Internet Explorer 5.5+ */
    font-size: 1.4rem !important;
}

code{
    white-space: normal !important;
}

pre[class*=language-] {
        font-size: 1.4rem;
}

div.code-toolbar {
    width: 100%;
}

div.code-toolbar > .toolbar button {
    font-size: 12px;
    text-transform: lowercase;
    font: 400 13.3333px Arial;
    border: 1px solid #d6deeb;
    border-radius: 0.4rem;
    background: #011627;
    padding: 4px 8px;
    right: 1rem;
    top: 1rem;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, bottom 0.2s ease-in-out;
}

div.code-toolbar>.toolbar button:focus, 
div.code-toolbar>.toolbar button:hover {
    color: #FFFFFF;
}

div.code-toolbar > .toolbar {
    position: absolute;
    right: .3em !important;
    transition: opacity .3s ease-in-out;
    opacity: 0;
}

div.code-toolbar > .toolbar .toolbar-item {
    padding: 2px;
}