ব্লগারে HighLight Code Box তৈরি করুন। How To Create HighLight Code Box

How To Create HighLight Code Box

  <link href='//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/styles/default.min.css' rel='stylesheet'/><!-- highlightCss -->
  
  

  <script src='//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/highlight.min.js'/>
<script>hljs.highlightAll();</script>
  
  

  /*--Codebox Css Start --*/
pre code.hljs {
    overflow-x: hidden;
}
/* width */
code::-webkit-scrollbar{width:5px}
/* Track */
code::-webkit-scrollbar-track{box-shadow:inset 0 0 3px grey;border-radius:3px}
:not(pre)>code[class*=language-], pre[class*=language-] {
    background: rgba(155, 155, 155, 0.05);
}
pre[class*=language-] {
    overflow: auto;
}
code[class*=language-], pre[class*=language-] {
    text-shadow: 0 1px #fff;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

.post-body-sudip pre {
    position: relative;
    display: block;
    background-color: rgba(155, 155, 155, 0.05);
    white-space: pre-wrap;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 2em;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 30px;
    border: 1px solid var(--blue);
    border-radius: 3px;
}
pre.language-html:before {
    content: "HTML";
    background: #54aae6;
}
pre.language-javascript:before{
    content: "Javascript";
    background: #fb6e6e;
}
pre.language-css:before {
    content: "CSS";
    background: #33d288;
}
pre.language-jquery:before {
    content: "jquery";
    background: #fb6e6e;
}
pre.language-json-feeds:before {
    content: "json-feeds";
    background: #fb6e6e;
}
pre.language-variables:before {
    content: "variables";
    background: #fb6e6e;
}
pre.language-xml:before {
    content: "xml";
    background: #fb6e6e;
}
pre.language-html:before, pre.language-xml:before, pre.language-css:before, pre.language-javascript:before, pre.language-jquery:before, pre.language-json-feeds:before, pre.language-variables:before {
    color: #fff;
    display: block;
    padding: 0 8px;
    margin-left: 5px;
    font-weight: 400;
    font-size: 39px;
    font-family: inherit;
    letter-spacing: 0px;
    text-align: center;
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
    writing-mode: tb-rl;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(180deg);
    white-space: nowrap;
}
code[class*=language-], pre[class*=language-] {
    text-shadow: 0 1px #fff;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}
code.language-html, code.language-css, code.language-javascript, code.language-jquery, code.language-xml, code.language-json-feeds, code.language-variables {
    min-height: 140px;
}
pre>code {
    max-width: 100%;
    max-height: 650px;
    overflow: auto;
    display: block;
    padding: 10px;
    padding-left: 60px;
    background: #e8edf7;
    color: var(--code-text-color);
    font-size: 14px;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    Inconsolata,: ;
    "Bitstream Vera Sans Mono",: ;
    "Courier New",: ;
    Courier: ;
    line-height: 1.6em;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border-left: none;
    margin: 5px 5px 5px 40px;
}
pre>button  {
    position: absolute;
    background: var(--purple);
    color: var(--white);
    outline: none;
    padding: 5px 10px;
    border: 1px solid var(--red);
    border-radius: 3px;
    top: 0px;
    right: 0px;
}

<pre class="language-javascript"><code class="language-javascript">javascript code here</code></pre>