SyntaxHighlighter v3.083 को Blogger पर प्रयोग करना

Syntax Highlighter version 3 एक बहुत ही ज़ोरदार जावास्क्रिप्ट टूल है जिसके ज़रिए ब्लॉगर पोस्ट में आप कोड और स्क्रिप्ट पोस्ट कर सकते हैं।
नीचे स्क्रिप्ट का उदाहरण दिया जा रहा है।

इसे ब्लॉगर साथ जोड़ना और पोस्टें बनाना बहुत सरल है।

Syntax Highlighter v3 को ब्लॉगर पर लगाना

1. डैशबोर्ड से अपना ब्लॉग चुनें [http://draft.blogger.com/home]
2. फिर उसके टेम्पलेट पर जायें
3. EDIT HTML पर क्लिक करके Proceed पर क्लिक करें
4. </head> खोजकर उसके ठीक ऊपर नीचे दिया गया कोड पेस्ट कर दें

<!-- Syntax Highlighter 3.0.83 START -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeFadeToGrey.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<!--script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/-->
<!--script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/-->
<!--script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/-->
<!--script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/-->
<!--script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/-->
<!--script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/-->
<!--script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/-->
<!--script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/-->
<!--script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/-->
<!--script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/-->
<!-- script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/ -->
<!-- script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'/ -->
<!-- script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/ -->
<!-- script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/ -->
<!-- script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/ -->
<!-- script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/ -->
<!-- script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/ -->
<!-- script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/ -->
<!-- script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/ -->
<!-- script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/ -->
<!-- script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/ -->
<!-- script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/ -->
<script language='javascript' type='text/javascript'>
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>

<!-- Syntax Highlighter 3.0.83 END -->

5. अब प्रिव्यू देखकर टेम्पलेट को SAVE कर दें

Note: कुल 23 javasrcript brush हैं जो कि class में define किये जाते हैं। उपरोक्त दिये गये कोड में मैंने मात्र js brush को enable किया है। बाक़ियों को कमेंट कर दिया है, आप चाहें तो उन कमेंट को अपनी सुविधानुसार खोल सकते हैं।

उदाहरण: खुला कोड

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>

उदाहरण: कमेंट किया हुआ कोड

<!--script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/-->

Syntax Highlighter v3 को ब्लॉगर पोस्ट में प्रयोग करना

1. अपने कोड को pre tag में रखना है और class में brush type define करना होगा। उदाहरण नीचे दिया जा रहा है।

<pre class='brush:[brushname]'>
 
 <!--Put Your Code Here (must be parsed)-->
 
 </pre>

2. must be parsed का अर्थ है < को &lt; लिखना होगा। ऐसा करने के लिए आप नीचे दिए गए किसी एक टूल का प्रयोग कर सकते हैं
a. Make Code Postable [https://taknikdrashta.com/make-code-postable/]
b. Postable [http://www.elliotswan.com/postable/]

3. उदाहरण: जिस तरह से कोड को पोस्ट में लिखना होगा

<script type="syntaxhighlighter" class="brush: js"><![CDATA[
  /**
   * SyntaxHighlighter
   */
  function foo()
  {
      if (counter <= 10)
          return;
      // it works!
  }
]]></script>

4. जो कि आपके ब्लॉग पोस्ट में निम्न प्रकार से दिखेगा

<script type="syntaxhighlighter" class="brush: js"><![CDATA[
  /**
   * SyntaxHighlighter
   */
  function foo()
  {
      if (counter <= 10)
          return;
      // it works!
  }
]]></script>

अन्य महत्वपूर्ण बातें:

1. Brush कैसे प्रयोग करें
Brushes के प्रयोग के विषय में अधिक जानने के लिए यहाँ क्लिक करें। [http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/]

2. यह कोड 8 विभिन्न Themes में उपलब्ध हैं

इसमें से मनचाही Theme को प्रयोग करने के लिए आपको ऊपर दिये कोड में CSS कोड बदलना होगा|
<!– Syntax Highlighter 3.0.83 START –> के नीचे दूसरी पंक्ति में –

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeFadeToGrey.css' rel='stylesheet' type='text/css'/>

जो लिंक है उसे नीचे दिये लिंकों में किसी एक के साथ बदलना होगा।

1. http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css
2. http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css
3. http://alexgorbatchev.com/pub/sh/current/styles/shThemeMidnight.css
4. http://alexgorbatchev.com/pub/sh/current/styles/shThemeMDUltra.css
5. http://alexgorbatchev.com/pub/sh/current/styles/shThemeFadeToGrey.css
6. http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css
7. http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css
8. http://alexgorbatchev.com/pub/sh/current/styles/shThemeDjango.css

Themes का Demo देखने के लिए यहाँ क्लिक करें | [http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/]

यदि किसी भी प्रकार का कोई संशय है तो मुझे नीचे टिप्पणी दें।