Ticker

6/recent/ticker-posts

Header Ads Widget

how to show codes in blog as in editor

Rupesh Darimisetti July 13, 2021

how to show codes in blog as in editor

    Every programmer who writes a blog post or article based on programming, coding wants to show code in a way as they want to differentiate the description, matter, content and the code to show that difference one has to use code formatter and code line indicators. The difference can be shown easily by placing the code in the following tags of HTML. 

      <pre><code>codes goes here</pre></code>

    In HTML, the code written in the blog will be formatted and shown as code without any highlighting. If one used to write code in notepad they will see that type of background without any highlighting for code keywords and statements. The color code programming language is mostly used to differentiate code, text, and comments easily. 

    Steps to add color highlighting for code in blogger:

    First of all open blogger goes to themes by clicking the menu, drop-down icon which is present on the left side of the blog post dashboard, which you have to click on the drop-down menu next to customize and click on edit HTML after it you will enter the XML file of the blog that is displayed when you open the blog in that go to head tag and place the link shown below in the head tag of XML script. 

     <head>
<link href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.2/build/styles/default.min.css" rel="stylesheet">
</link>
</head>

    After it goes down to the bottom of the XML file and edits a script file in the body of the XML file scripts to add a highlight to the code with a black background and indicate line number beside the code. 
    <body>
 <script src='//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.5.1/build/highlight.min.js'/>
 <script src='https://cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/src/highlightjs-line-numbers.min.js'/>
 </body>
    Now its time to add line numbers to your ad they provide you how long the code is and easy to find it where you where before just by remembering the number.

    Scripts to add to your XML file to show line number and highlight code as per their language syntax:

    Go to jsdeliver and scroll down a bit you will search box in which type highlight line number you will see a list click on the first one which will be same as the search you typed, select the html code by clicking on the copy button,select copy html and paste it in the body tags of theme html page at last before ending of body tag.

    You have set all the thing necessary for the thing to work just you have to call the function to load when the webpage starts by just placing the code the above link. 
     <script>hljs.initHighlightingOnLoad();</script>
    <script>hljs.initLineNumbersOnLoad();</script>
    Now save the code in html codebase of theme page and it will gets reflected to all the pages where you use the pre and code block to write code. 

    Links to be add to your XML file of page for background color of code block:

     The above settings will show you the basic theme if you change the theme you have go to jsdeliver page and search for highlight and open it and go to styles in that select one theme that you know or test it by placing one after the others, I choose GitHub dark min js as theme. 
    <link href='https://cdn.jsdelivr.net/npm/highlight.js@11.5.1/styles/rainbow.css' rel='stylesheet'/>
    Tags:
    Rupesh Darimisetti

    Posted by: Rupesh Darimisetti

    Rupesh is a mechanical engineering undergraduate student who is passionate about things around the world and programming. He shares the knowledge that he have about the things that he knows which are helpfull for the pepole.

    Post a Comment

    0 Comments

    If you have any doubts or any topics that you want to know more about them please let me know