how to do syntax highlighting in blogger through editplus

use the below code and and place it in your head tag in the blog html

<style>
.div{
overflow:auto;
}
.w3-codespan {
    color: crimson;
    background-color: #f1f1f1;
    padding-left: 4px;
    padding-right: 4px;
    font-size: 110%;
}

.w3-code, .w3-codespan {
    font-family: Consolas,"courier new";
    font-size: 16px;
}

w3-card-2, .w3-example {
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
}
.w3-example, .w3-code, .w3-reference {
    margin: 20px 0;
}
.w3-example {
    background-color: #f1f1f1;
    padding: 0.01em 16px;
}
*, *:before, *:after {
    box-sizing: inherit;
}
user agent stylesheet
div {
    display: block;
}
Inherited from div.w3-row.w3-white
.w3-white, .w3-hover-white:hover {
    color: #000!important;
    background-color: #fff!important;
}
Inherited from div#belowtopnav.w3-main.w3-light-grey
.w3-light-grey, .w3-hover-light-grey:hover {
    color: #000!important;
    background-color: #f1f1f1!important;
}
Inherited from body
html, body {
    font-family: Verdana,sans-serif;
    font-size: 15px;
    line-height: 1.5;
}
Inherited from html
html, body {
    font-family: Verdana,sans-serif;
    font-size: 15px;
    line-height: 1.5;
}
Pseudo ::before element
*, *:before, *:after {
    box-sizing: inherit;
}
Pseudo ::after element
*, *:before, *:after {
    box-sizing: inherit;
}
*, *:before, *:after {
    box-sizing: inherit;
}
Pseudo ::after element
*, *:before, *:after {
    box-sizing: inherit;
}
w3-code {
    border-color: #4CAF50;
}
.w3-example, .w3-code, .w3-reference {
    margin: 20px 0;
}
.w3-code {
    line-height: 1.4;
    width: auto;
    background-color: #fff;
    padding: 8px 12px;
    border-left: 5px solid #558abb;
    word-wrap: break-word;
 background-image:url("blueprint.png");
}
.w3-code, .w3-codespan {
    font-family: Consolas,"courier new";
    font-size: 16px;
}
pre.line-numbers {
    position: relative;
    padding-left: 3.8em;
    counter-reset: linenumber;

}
.line-numbers .line-numbers-rows {
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.8em;
    width: 3em;
    letter-spacing: -1px;
    border-right: 1px solid #999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
span {
    margin: 0;
    padding: 0;
    border: 0;
}
</style>

and the below html to your blog post html tag and place the code in the place your editplus html in the middle of this div tags


<div class="w3-example">
<h3 style="font-family: Comic Sans MS">Environment variables interview questions</h3>
<div class="w3-code notranslate cssHigh">
//place your editplus html code here
 
</div>
</div>