ব্লগারে 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 -->

তারপর আমরা একদম শেষের দিকে চলে যাব অর্থাৎ </body> ত্যাগের শেষে আমরা নিচের যে জাভাস্ক্রিপ্ট টি আছে সেটি আমরা যুক্ত করে দেব।


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

এরপর আমরা সিএসএস স্টাইল যুক্ত করার জন্য আমরা সিএসএস স্টাইল কোডটি কপি করে নিয়ে </header> সেকশনের ঠিক আগে অর্থাৎ সেকশনের উপরে আমরা এসিএসএস style যুক্ত করে দেব।


  /*--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)&gt;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: &quot;HTML&quot;;
    background: #54aae6;
}
pre.language-javascript:before{
    content: &quot;Javascript&quot;;
    background: #fb6e6e;
}
pre.language-css:before {
    content: &quot;CSS&quot;;
    background: #33d288;
}
pre.language-jquery:before {
    content: &quot;jquery&quot;;
    background: #fb6e6e;
}
pre.language-json-feeds:before {
    content: &quot;json-feeds&quot;;
    background: #fb6e6e;
}
pre.language-variables:before {
    content: &quot;variables&quot;;
    background: #fb6e6e;
}
pre.language-xml:before {
    content: &quot;xml&quot;;
    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&gt;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, &#39;Andale Mono&#39;, &#39;Ubuntu Mono&#39;, monospace;
    Inconsolata,: ;
    &quot;Bitstream Vera Sans Mono&quot;,: ;
    &quot;Courier New&quot;,: ;
    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&gt;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;
}

এখন আমরা ব্লগার পোস্টের মাঝে যখন আমরা কোড শেয়ার করব তখন অবশ্যই আমি একটি এইচটিএমএল দিয়ে রেখেছি সেটি আমরা যুক্ত করব যে রকম - এইস টি এম এল হলে Html দেব।

<pre class="language-html"><code class="language-html">htmlcode here</code></pre>

এখন আমরা ব্লগার পোস্টের মাঝে যখন আমরা কোড শেয়ার করব তখন অবশ্যই আমি একটি এইচটিএমএল দিয়ে রেখেছি সেটি আমরা যুক্ত করব যে রকম - সি এস এস হলে Cssদেব।

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

এখন আমরা ব্লগার পোস্টের মাঝে যখন আমরা কোড শেয়ার করব তখন অবশ্যই আমি একটি এইচটিএমএল দিয়ে রেখেছি সেটি আমরা যুক্ত করব যে রকম - জাভাস্ক্রিপ্ট হলে Javascript দেব।

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

যেখানে আমি লিখেছি যে - html code here , css code here & javascript code here, এখানে Code গুলো Encoder দিয়ে Encode করে বসাতে হবে। দেওয়ার পর আমরা এটাকে ক্লোজ করে যখন আমরা সেভ বাটনে ক্লিক করব।

তারপরে আপনি আপনার পোস্টটি ভিউ করে দেখুন সুন্দর একটি কোড বক্স যুক্ত হয়ে গিয়েছে তো বন্ধুরা আজকের এই হাইলাইট যুক্ত কোড শেয়ার করার বক্সটি আপনার কেমন লাগলো যদি ভালো লেগে থাকে অবশ্যই আমার এই টিউনে একটি লাইক পেতে পারি।

আর আপনি যদি আমার এই সাইট এ নতুন হয়ে থাকেন অবশ্যই একটি মন্তব্য করে দেবেন এবং পাশে থাকবেন। তো বন্ধুরা আজকের এই টিউন টি যদি আপনাদের ভালো লেগে থাকে বা উপকারে লেগে থাকে অবশ্যই আপনার মতামত জানাতে ভুলবেন না।

তো বন্ধুরা সকলে ভাল থাকুন সুস্থ থাকুন টাটা.

ক্রেডিট বাইঃ- SMsudipBD.Com

Tags:- ব্লগারে HighLight Code Box তৈরি করুন। How To Create HighLight Code Box,Code Blogger,blogger widgets,javascript,html,css tutorials,