আজকে আমরা দেখবো কিভাবে একটি ওয়েবসাইটে প্রোগ্রামিং কোড দিতে হয়।
Table of Contents
এবং কিভাবে সেটি হাইলাইট করে দেখাতে হয়, সাথে থাকবে কালার কোড এবংকপি বাটনসহ।
What is a Syntax highlighter?
এর মাধ্যমে আপনার ওয়েব সাইটের পোস্টের মাঝে প্রোগ্রামিং কোডগুলো দেখানোর জন্য দৃষ্টিনন্দনীয় করা হয়।
How does Syntax Highlighter Works in blogger?
আমাদের নিচের পদ্ধতিগুলো অনুসরন করে আপনার ব্লোগার সাইটে এরকম সিস্টেম চালু করতে পারবেন।
How to Add Syntax Highlighter in blogger with copy button?
নিচের পদ্ধতিগুলো অনুসরন করে আপনার সাইটে এরকম কপি বাটনসহ সিস্টেম চালু করতে পারবেন।
 |
| Syntax Highlighter Code in Your blogger Site |
প্রথমে আপনার ব্লোগারের Blogger.com dashboard এ যান।
তারপরে Theme এ যান।
Customize এর পাশে ড্রোপডাউনে ক্লিক করুন এবং Edit HTML এ যান।
আপনার থিমের </head> tag কোডের আগে নিচের কেডটি বসান।
Paste this Before The </head> Tag
<link href='https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.8.0/build/styles/default.min.css' rel='stylesheet'/>
<link href='https://unpkg.com/@highlightjs/cdn-assets@11.7.0/styles/default.min.css' rel='stylesheet'/>
]]></b:skin> tag কোডের আগে নিচের কেডটি বসান।
Search in blogger ]]></b:skin> tag via CTRL + F & Paste this Before The ]]></b:skin> tag.
HTML tag কোড যদি না দেখা যায় তাহলে এখান থেকে Decode হতে EnCode করে নিয়ে আপনার পোস্টের মাঝে কোড বসান।
#topicbox {
border-radius: 0em 1em 0em 0em;
background-image: linear-gradient(
-100deg,
rgba(255, 20, 0, 0.2),
rgba(255, 20, 0, 0.7) 95%,
rgba(255, 20, 0, 0.1)
);
}
/* for block of numbers */
.hljs-ln-numbers {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
color: #ccc;
border-right: 1px solid #CCC;
vertical-align: top;
padding-right: 5px;
/* your custom style here */
}
/* for block of code */
.hljs-ln-code {
padding-left: 10px;
}
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #1E1E1E;
color: #DCDCDC;
font-weight: normal;
font-size: 1.15em !important;
}
.hljs-keyword,
.hljs-literal,
.hljs-symbol,
.hljs-name {
color: #569CD6;
}
.hljs-link {
color: #569CD6;
text-decoration: underline;
}
.hljs-built_in,
.hljs-type {
color: #4EC9B0;
}
.hljs-number,
.hljs-class {
color: #B8D7A3;
}
.hljs-string,
.hljs-meta-string {
color: #D69D85;
}
.hljs-regexp,
.hljs-template-tag {
color: #9A5334;
}
.hljs-subst,
.hljs-function,
.hljs-title,
.hljs-params,
.hljs-formula {
color: #DCDCDC;
}
.hljs-comment,
.hljs-quote {
color: #57A64A;
font-style: italic;
}
.hljs-doctag {
color: #608B4E;
}
.hljs-meta,
.hljs-meta-keyword,
.hljs-tag {
color: #9B9B9B;
}
.hljs-variable,
.hljs-template-variable {
color: #BD63C5;
}
.hljs-attr,
.hljs-attribute,
.hljs-builtin-name {
color: #9CDCFE;
}
.hljs-section {
color: gold;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
.hljs-bullet,
.hljs-selector-tag,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #D7BA7D;
}
.hljs-addition {
background-color: #144212;
display: inline-block;
width: 100%;
}
.hljs-deletion {
background-color: #600;
display: inline-block;
width: 100%;
}
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #1E1E1E;
color: #DCDCDC;
font-weight: normal;
font-size: 1.15em !important;
}
.hljs-keyword,
.hljs-literal,
.hljs-symbol,
.hljs-name {
color: #569CD6;
}
.hljs-link {
color: #569CD6;
text-decoration: underline;
}
.hljs-built_in,
.hljs-type {
color: #4EC9B0;
}
.hljs-number,
.hljs-class {
color: #B8D7A3;
}
.hljs-string,
.hljs-meta-string {
color: #D69D85;
}
.hljs-regexp,
.hljs-template-tag {
color: #9A5334;
}
.hljs-subst,
.hljs-function,
.hljs-title,
.hljs-params,
.hljs-formula {
color: #DCDCDC;
}
.hljs-comment,
.hljs-quote {
color: #57A64A;
font-style: italic;
}
.hljs-doctag {
color: #608B4E;
}
.hljs-meta,
.hljs-meta-keyword,
.hljs-tag {
color: #9B9B9B;
}
.hljs-variable,
.hljs-template-variable {
color: #BD63C5;
}
.hljs-attr,
.hljs-attribute,
.hljs-builtin-name {
color: #9CDCFE;
}
.hljs-section {
color: gold;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
.hljs-bullet,
.hljs-selector-tag,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #D7BA7D;
}
.hljs-addition {
background-color: #144212;
display: inline-block;
width: 100%;
}
.hljs-deletion {
background-color: #600;
display: inline-block;
width: 100%;
}
</body> tag কোডের আগে নিচের কেডটি বসান।
<script src='//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js'/>
<script src='https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.8.0/build/highlight.min.js'/>
<script src='https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.8.0/build/languages/go.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js'/>
<script src='https://unpkg.com/highlightjs-badge/highlightjs-badge.min.js'/>
<script>
hljs.highlightAll();
hljs.initLineNumbersOnLoad();
hljs.initHighlightingOnLoad();
</script>
<script>
//<![CDATA[
setTimeout(function(){for(var e=document.querySelectorAll("pre>code"),o=0;o<e.length;o++)hljs.highlightBlock(e[o]);window.highlightJsBadge({contentSelector:".container",loadDelay:0,copyIconClass:"fa fa-copy",checkIconClass:"fa fa-check text-success",onBeforeTextCopied:function(e,o){return e}})},10);
//]]>
</script>
আপনি পোস্টের যেখানে হাইলাইট কোড দেখাতে চান সেখানে নিচের কোডটি বসিয়ে -----YOUR CODE HERE----- এর যায়গাতে আপনার কোডটি বসান।
paste this HTML code in show your syntax highlighter code posts. (Replies Your Code in -----YOUR CODE HERE----- )<div class="container" style="margin-top: 20px;">
<pre><code class="hljs" id="code" data-ln-start-from="10">HTML tag কোড যদি না দেখা যায় তাহলে এখান থেকে Decode হতে EnCode করে নিয়ে আপনার পোস্টের মাঝে কোড বসান।
Tag:
How do I add syntax highlighting in Blogger?
What is code syntax highlighter?
How do you highlight code syntax in HTML?
How do I add a code to my Blogger blog?
How do you highlight text in a blog?
How does syntax highlight work?
Tags:
