How to add syntax highlighter in WordPress, Blogger and Custom Website? Blogger, WordPress और custom website में syntax highlighter कैसे add करें? जो लोग अपने ब्लॉग में या फिर अपने website में code लिखते हैं यानि की coding related knowledge share करते हैं तो वे लोग coding को highlight करने के लिए plugin install करते हैं जो की केवल वर्डप्रेस में facility available है लेकिन blogger और custom ब्लॉग में ये facility आपको code highlighter के द्वारा इस्तेमाल करना होगा|
WordPress platform के लिए ढेर सारे plugin available हैं लेकिन बहुत सारे plugin ऐसे हैं जो की सालो से update नहीं हुए हैं जिसके कारण नए WordPress version में बहुत सारे plugin support नहीं हो पा रहे हैं और कुछ कुछ plugin error show करने लग जा रहे हैं जिसके कारण user experience बहुत ही खराब हो जा रहा है|
अगर आप भी अपने ब्लॉग में code लिखते हैं तो आपको custom plugin इस्तेमाल करना चाहिए जो की fast load भी होगा और कभी error के chances भी नहीं होंगे| तो चलिए जानते हैं की WordPress, blogger और custom website में code highlighter यानि की syntax highlighter कैसे लगायें?
WordPress में syntax highlighter कैसे use करें?
WordPress का जो अभी latest version 5.2 चल रहा है उसमें crayon syntax highlighter plugin work नहीं कर रहा है जिसके कारण अधिकतर user उसे uninstall करके दूसरा plugin search करने की कोशिश कर रहे हैं| अगर आप भी उनमें से एक हैं तो ये पोस्ट खास आपके लिए है| इसमें मैं WordPress में syntax highlighter add करने का तरीका बताऊंगा जो की पूरा lightweight होगा यानि की वो fast load होगा जिसके कारण ब्लॉग के speed पर कोई खास effect नहीं पड़ेगा|
WordPress ब्लॉग में custom syntax highlighter add करने के लिए निचे दिए गए steps को follow करें?
Step 1: सबसे पहले WordPress डैशबोर्ड को open करें और फिर Appearance menu में Theme Editor पर click करें|
Step 2: उसके बाद right side में header.php page पर click करें और उस page में निचे दिया गया CDN को copy करके paste करें| इसे <head> tag के just निचे paste करना है| CDN में आपको CSS और JavaScript का file मिलेगा जिसमें Syntax highlighter use करने के code दिए गए हैं| मैं यहाँ पर Prism syntax highlighter के बारे में बता रहा हूँ जो की सबसे fast और easy है|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/themes/prism.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/prism.min.js"></script>Step 3: उसके बाद Update File पर click करके file को save करें|
Step 4: अब जो भी पोस्ट लिखना है वो पोस्ट लिखे और जहाँ पर code insert करना है वहां पर WordPress के दिए गए option में से Code option का इस्तेमाल करके code insert करें और code insert करने के बाद right side में दिए गए block setting में Additional CSS वाले box में अपने code language को add करें जैसे यदि आप CSS code add कर रहे हैं तो आपको Additional CSS box में language-css लिखना होगा|
Step 5: अब आप अपने पोस्ट को publish करें और उसके बाद आप अपने पोस्ट में लगाये हुए code को देख सकते हैं की वो Colorful हुआ या नहीं| यदि कलरफुल नहीं हुआ है तो आपको फिर से अच्छे से code लगाना होगा|
एक बात का हमेशा ध्यान रखें की यह नए WordPress version में काम करेगा अगर आप पुराने WordPress version में इस्तेमाल करना चाहते हैं तो आप Custom Website वाला steps follow कर सकते हैं|
Custom Website में syntax or code highlighter कैसे इस्तेमाल करें?
अगर आप अपनी खुद की ब्लॉग किसी programming language में बना रहे हैं जैसे की PHP, ASP, JSP, HTML, CSS, JavaScript तो आपको अपने ब्लॉग में लगाये गए code को highlight करने के लिए syntax highlighter लगाना होगा जिससे user को code समझने में आसानी हो| तो चलिए जानते हैं की custom website या blog में syntax highlighter का इस्तेमाल कैसे करें?
Step 1: सबसे पहले ऊपर दिए गए CDN यानि की CSS और JavaScript के link को copy करें और अपने ब्लॉग या website के <head> tag के निचे paste करें|
एक बात का हमेशा ध्यान रखें की अगर आप अपने website या blog में Jquery file को include किया है तो ऊपर दिए गए JavaScript link को Jquery source file के निचे paste करें|
Step 2 : अब उसके बाद code को जहाँ पर भी लिख रहे हैं वहां पर <pre> और <code> tag के साथ लिखें जैसे की निचे example दिया गया है|
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/themes/prism.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/prism.min.js"></script>
</head>
<body>
<pre><code class="language-css">
<!--Your Code Here-->
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
</code></pre>
</body>
</html>Blogger blog में भी आप custom website वाला method का इस्तेमाल करके syntax को highlight कर सकते हैं| Blogger blog में Theme menu में जाकर के Edit HTML par click करके code add कर सकते हैं|
उसके बाद पोस्ट लिखते समय पोस्ट में code add करने के बाद आपको HTML View में जाना होगा और वह पर code के पहले <pre> और <code> tag लगाना होगा जैसे की ऊपर बताया गया है|
Conclusion and Final Words
Prism.js सबसे best और सबसे fast loading syntax highlighter plugin है जो की हर एक blogger और website owner के लिए काफी helpful है| इसका सबसे खास फायदा या है की ये ब्लॉग के loading speed पर कोई effect नहीं डालता है|
अगर आप Prism.js के बारे में ज्यादा जानना चाहते हैं तो आप इसके official website पर जाकर के पढ़ सकते हैं| वहां पर अलग अलग language के लिए अलग अलग class name बताये गए हैं जैसे की CSS के लिए language-css, PHP के लिए language-php, HTML के लिए language-html etc. Click here for prism.js
तो ये पोस्ट खास उनलोगों के लिए था जो अपने ब्लॉग में code add करना चाहते थे| मुझे उम्मीद है की यह पोस्ट आपको काफी पसंद आया होगा| मैं भी पहले crayon syntax highlighter का इस्तेमाल करता था लेकिन उसमें कुछ error आने के बाद मैं prism.js का इस्तेमाल करने लगा|
Leave a Reply