PrismJS | how to implement it in blogger to make your code bloks look better

on

 
 
 
this guide will help you enable prismjs code block prettifier, follow the steps and add the code snipets to make it happen
 
1- Add the below code under <head> block of your blog template

<!-- Include Prism.js library -->
<link href='https://cdn.jsdelivr.net/npm/prismjs@1.28.0/themes/prism-okaidia.min.css' rel='stylesheet'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css' rel='stylesheet'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/toolbar/prism-toolbar.min.css' rel='stylesheet'/>
<link href='https://cdn.jsdelivr.net/npm/prismjs@1.28.0/plugins/line-numbers/prism-line-numbers.css' rel='stylesheet'/>
<style>
  code {
    padding: 3px 4px !important;
    margin: 2px !important;
}

code[class*=&quot;language-&quot;], pre[class*=&quot;language-&quot;] {
    overflow-wrap: break-word !important;
    white-space: pre-wrap !important;
    word-break: break-all !important;
}
.copy-to-clipboard-button {
    box-shadow:none !important;
    margin: 5px 15px !important;
    padding: 10px 14px !important;
    background: rgba(224,224,224,.7) !important;
    color: #000 !important;
}

.copy-to-clipboard-button span
{
    margin-left: 5px;
}

.copy-to-clipboard-button:hover {
    background-color: rgba(0, 0, 0, 0.5) !important;
    border: solid 1px rgba(255, 255, 255, 0.5) !important;
    border-radius: 1;
    color: rgba(255, 255, 255, 0.8) !important;
}

.copy-to-clipboard-button span {
    margin: 2px !important;
}

.toolbar {
    position: relative;
    background-color: none;
    border: none;
    border-radius: none;
    margin-bottom: none;
    padding: none;
    overflow: auto;
}

.toolbar-item {
    display: inline-block;
    margin-right: none;
}

/* CSS for copied code */
pre.prism-code .clipboard-copy {
    background-color: yellow;
    color: black;
}
</style>

<script src='https://cdn.jsdelivr.net/npm/prismjs@1.28.0/prism.js'/>
<script src='https://cdn.jsdelivr.net/npm/prismjs@1.28.0/components/prism-core.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/toolbar/prism-toolbar.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js'/>
<script src='https://cdn.jsdelivr.net/npm/prismjs@1.28.0/plugins/autoloader/prism-autoloader.min.js'/>
<script src='https://cdn.jsdelivr.net/npm/prismjs/plugins/line-numbers/prism-line-numbers.min.js'/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/normalize-whitespace/prism-normalize-whitespace.min.js"></script>
<script>
    window.addEventListener('DOMContentLoaded', () => {
        // Add show line numbers to all pre tags
        document.querySelectorAll('pre').forEach(pre => {
            pre.classList.add('line-numbers');
        });

        // Add event listener to the document to handle copy button clicks
        document.addEventListener('click', event => { 
            const target = event.target.parentNode;
            if (target.classList.contains('copy-to-clipboard-button')) {
                const preElement = target.parentNode.parentNode.previousElementSibling;

                // Add a class to the pre element to change its CSS
                const codeBlock = preElement.getElementsByTagName('code')[0];
                const range = document.createRange();
                range.selectNode(codeBlock);
                window.getSelection().removeAllRanges();
                window.getSelection().addRange(range);

                // Remove the class after 2 seconds
                setTimeout(() => {
                    window.getSelection().removeAllRanges();
                }, 200);
            }
        });
        Prism.highlightAll(null, Prism.plugins.NormalizeWhitespace);
    });

</script>

2- Enjoy (;

Comments

Post a Comment