Welcome to It Is Unique Official! In this post, I will guide you on how to add a syntax highlighter to your Blogger website.
A syntax highlighter is a tool that formats and colors code snippets to make them more readable and visually appealing. By applying distinct colors and styles to keywords, variables, strings, and other elements, it enhances code comprehension and ensures better presentation in blogs, tutorials, or documentation. Syntax highlighters are widely used in coding platforms, text editors, and educational content to improve clarity and professionalism.
What is Syntax Highlighter?
A syntax highlighter is a software tool or library that applies color coding and formatting to source code or programming scripts. It identifies different elements of code, such as keywords, variables, strings, and comments, and assigns them unique colors or styles. This visual distinction improves readability, helps in understanding code structure, and enhances the overall presentation. Syntax highlighters are commonly used in code editors, IDEs, and technical blogs to display code snippets effectively.
How to Add Syntax Highlighter in Blogger?
Important
Before making changes to your theme's XML code, it is highly recommended to create a backup of your current theme. This ensures that if any issues arise, you can easily restore the original version.
Step 1: Begin by logging into your Blogger Dashboard to access your blog settings and make necessary changes.
Step 2: In the Blogger Dashboard, navigate to and click on the "Theme" option to access your blog's theme settings.
Step 3: Click the downward arrow icon next to the "Customize" button to reveal additional theme options.
Step 4: Click on "Edit HTML," and you will be redirected to the HTML editing page where you can make changes to your theme's code.
Step 5: Now, search for the code ]]></b:skin> or /*]]>*/</style>, and paste the following CSS code just above it to apply the necessary styles.
/* Syntax Highlightng Root CSS */ :root{--dark-red:#800;--green:#008;--dark-orange:#660;--bright-green:#080;--darker-green:#066;--grayish-tone:#606;--black:#000;--tan:#9B703F;}
/* Syntax Highlighting for Code */ .hljs-comment,.hljs-quote{color:var(--dark-red)}.hljs-keyword,.hljs-selector-tag,.hljs-section,.hljs-title,.hljs-name{color:var(--green)}.hljs-variable,.hljs-template-variable{color:var(--dark-orange)}.hljs-string,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-regexp{color:var(--bright-green)}.hljs-literal,.hljs-symbol,.hljs-bullet,.hljs-meta,.hljs-number,.hljs-link{color:var(--darker-green)}.hljs-doctag,.hljs-type,.hljs-attr,.hljs-built_in,.hljs-builtin-name,.hljs-params{color:var(--grayish-tone)}.hljs-attribute,.hljs-subst{color:var(--black)}.hljs-formula{font-style:italic}.hljs-selector-id,.hljs-selector-class{color:var(--tan)}.hljs-addition,.hljs-deletion{color:var(--bright-green)}.hljs-deletion{color:var(--dark-red)}.hljs-strong,.hljs-doctag{font-weight:bold}.hljs-emphasis{font-style:italic}Step 6: Copy the following code and paste it just above the </body> tag in your HTML file.
<!-- Highlight.js -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'></script>
<script>/* Syntax Highlight */ hljs.initHighlightingOnLoad();</script>Step 7: Save the changes by clicking on the save icon .
Step 8: You're all set! The changes have been successfully applied.
Typography for Write Syntax Codes in HTML
For better typography when displaying code snippets in HTML, you can use the following structure:
<div class="pre css notranslate"><pre><code>Your_CSS_Code_Here</code></pre></div>
<div class="pre html notranslate"><pre><code>Your_HTML_Code_Here</code></pre></div>
<div class="pre js notranslate"><pre><code>Your_JavaScript_Code_Here</code></pre></div>This structure ensures proper formatting and syntax highlighting for CSS, HTML, and JavaScript code.
Terms of Use
To appreciate our work, please consider keeping the credits within the code.
Rewriting or copying this post, including the code or any part of this article, is strictly prohibited without permission. Unauthorized use will result in legal actions.
Conclusion
In conclusion, integrating a syntax highlighter into your Blogger website not only enhances the readability of your code snippets but also improves the overall user experience for your readers. By following the steps outlined in this blog post, you can easily add Highlight.js to your Blogger template, customize the appearance of your code, and ensure your blog looks more professional and engaging. With proper SEO optimization and clear formatting, your blog will become a valuable resource for developers and learners alike, making complex code easier to understand and follow.