javascript - ब्लॉगर/ब्लॉगस्पॉट के साथ सुंदरता का उपयोग कैसे करें?




shared-hosting blogger (7)

मैं प्रोग्रामिंग पर कुछ ग्रंथों की मेजबानी करने के लिए blogger.com का उपयोग कर रहा हूं, और मैं कोड नमूनों को अच्छी तरह से रंग देने के लिए prettify (stackoverflow के समान) का उपयोग करना चाहता हूं।

मैं ब्लॉग डोमेन में prettify स्क्रिप्ट कैसे स्थापित करूं?
क्या यह बेहतर होगा (अगर वास्तव में यह संभव है) कहीं साझा की गई प्रतिलिपि से लिंक करें?
मेरे पास एक अलग डोमेन पर वेबस्पेस है। क्या इससे मदद मिलेगी?

बहुत धन्यवाद।


अपने ब्लॉगर में Google कोड प्रीटीफायर जोड़ना बहुत आसान है।

बस टैग से पहले अपने ब्लॉगर में नीचे जावास्क्रिप्ट लाइब्रेरी शामिल करें।

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

बस नीचे की तस्वीर की तरह ...

अब आपने अपने ब्लॉगर में Google कोड प्रीटीफायर सफलतापूर्वक जोड़ा है।

अब अगर आप अपने ब्लॉगर पोस्ट में कोड डालना चाहते हैं तो कोड (एचटीएमएल, सीएसएस, पीएचपी और इत्यादि) जोड़ें, फिर .... टैग के बीच उस कोड को डालें।

 <pre class="prettyprint">...</pre> 

या

<code class="prettyprint">...</code>

Google का डेमो ब्लॉगर पर सुंदरता

कृपया निम्न लिंक में ब्लॉगर को यह Google प्रीटीफायर जोड़ने के लिए इस दस्तावेज़ को देखें।

Google Prettify का उपयोग कर ब्लॉगर के लिए सिंटेक्स हाइलाइटर कैसे जोड़ें


आजकल, Google-Code-Prettify में ऑटो-लोडर स्क्रिप्ट है। आप एक यूआरएल के माध्यम से prettify के लिए जावास्क्रिप्ट और सीएसएस लोड कर सकते हैं।

स्क्रिप्ट को अपने ब्लॉगर टेम्पलेट के <head> अनुभाग में जोड़ें और यह आपकी सभी पोस्ट पर काम करेगा:

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

यहां अधिक जानकारी: http://code.google.com/p/google-code-prettify/wiki/GettingStarted


जब आप ब्लॉगर में एक नई प्रविष्टि करते हैं, तो आपको अपनी प्रविष्टि में HTML का उपयोग करने और अपनी ब्लॉग प्रविष्टियों को संपादित करने का विकल्प मिलता है।

तो http://blogger.com टाइप करें, फिर लॉगिन करें, फिर पोस्टिंग> पोस्ट संपादित करें> संपादित करें, फिर वहां इसे शीर्ष पर रखें:

<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/lang-css.min.js"></script>
<script type="text/javascript">
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(function() {
    prettyPrint();
});
</script>
<style type="text/css">
/* Pretty printing styles. Used with prettify.js. */

.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
pre.prettyprint { padding: 2px; border: 1px solid #888; }

@media print {
  .str { color: #060; }
  .kwd { color: #006; font-weight: bold; }
  .com { color: #600; font-style: italic; }
  .typ { color: #404; font-weight: bold; }
  .lit { color: #044; }
  .pun { color: #440; }
  .pln { color: #000; }
  .tag { color: #006; font-weight: bold; }
  .atn { color: #404; }
  .atv { color: #060; }
}
</style>

ध्यान दें कि आपको एक ईवेंट हैंडलर के रूप में सीधे prettyPrint उपयोग नहीं करना चाहिए, यह इसे भ्रमित करता है (विवरण के लिए prettyPrint देखें)। यही कारण है कि हम addLoadEvent एक फ़ंक्शन पास कर रहे हैं जो फिर घूमता है और prettyPrint कॉल prettyPrint

इस मामले में क्योंकि ब्लॉगर हमें स्टाइलशीट से लिंक करने की अनुमति नहीं देता है, हम सिर्फ prettify.css सामग्री एम्बेड करते हैं।

फिर "prettyprint" के वर्ग नाम के साथ <code></code> टैग या <pre></pre> टैग "prettyprint" , आप इस "prettyprint lang-html" जैसी भाषा भी निर्दिष्ट कर सकते हैं

तो यह इस तरह दिख सकता है

<pre class="prettyprint lang-html">
<!-- your code here-->
</pre>

या इस तरह

<code class="prettyprint lang-html">
<!-- your code here-->
</code>

आपके द्वारा डाला गया कोड इसकी HTML को <और> से साफ़ करने की आवश्यकता है, यह करने के लिए बस अपना कोड यहां पेस्ट करें: http://www.simplebits.com/cgi-bin/simplecode.pl

आप अपने एचटीएमएल लेआउट में शीर्ष कोड डाल सकते हैं ताकि यदि आप चाहें तो डिफ़ॉल्ट रूप से सभी पृष्ठों के लिए इसमें शामिल किया गया है।

अपडेट करें अब आप ब्लॉगर में सीएसएस फाइलों को लिंक कर सकते हैं, इसलिए इसे <head> जोड़ना पर्याप्त होना चाहिए

<link href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/lang-css.min.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function() {
        prettyPrint();
    });
</script>

मैंने उद्देश्य पर बॉडी ऑनलोड इवेंट को प्रतिस्थापित नहीं करना चुना, इसके बजाय मैं नए डोमकंटेंट लोडेड इवेंट का उपयोग कर रहा हूं, जो पुराने ब्राउज़र का समर्थन नहीं करता है, अगर आपको पुराना ब्राउज़र समर्थन चाहिए, तो आप सुंदरप्रिंट शुरू करने के लिए किसी भी अन्य लोड इवेंट का उपयोग कर सकते हैं, उदाहरण के लिए jQuery:

jQuery(function($){
    prettyPrint();
});

या माना जाता है कि सबसे छोटा डोमरेड कभी भी

और आपका काम :)

संपादित करें:

चूंकि लिम एच ने टिप्पणियों में बताया, यदि आप ब्लॉगर गतिशील विचारों (AJAX टेम्पलेट्स) का उपयोग करते हैं तो आपको कस्टम जावास्क्रिप्ट को बांधने के लिए यहां वर्णित विधि का उपयोग करने की आवश्यकता है: prettyPrint () पृष्ठ लोड पर नहीं बुलाया जाता है

2017-06-04 अपडेट करें

यहां गाइड का उपयोग करें https://github.com/google/code-prettify

असल में बस इसका उपयोग करें :)

<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
<pre class="prettyprint"><code class="language-css">...</code></pre>

निम्नलिखित मेरे लिए तुरंत काम किया।

  • ब्लॉगर> लेआउट> HTML संपादित करें पर जाएं
  • निम्न स्निपेट की प्रतिलिपि बनाएँ और " <head> संपादित करें" फ़ील्ड में <head> तुरंत बाद इसे पेस्ट करें:

स्निपेट:

<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/>
<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'></script>
  • </head> <body onload='prettyPrint()'> <body> साथ <body onload='prettyPrint()'> साथ </head> प्रतिस्थापित करें
  • "टेम्पलेट सहेजें" पर क्लिक करें
  • ब्लॉगर> पोस्टिंग> नई पोस्ट पर जाएं
  • सुनिश्चित करें कि आप "HTML संपादित करें" पर क्लिक करके HTML संपादित कर रहे हैं। खाली क्षेत्र में प्रयास करें:

<pre class="prettyprint">int foo=0; NSLog(@"%i", foo); </pre>

  • ध्यान दें कि अगर आप "पूर्वावलोकन" पर क्लिक करते हैं तो आपको यह कोड केवल काले रंग में दिखाई देगा। चिंता मत करो (अभी तक)।
  • "प्रकाशित पोस्ट" पर क्लिक करें और फिर "ब्लॉग देखें" पर क्लिक करें। आपका कोड सुंदर होना चाहिए।

ब्लॉगर थीम अनुभाग पर जाएं और एचटीएमएल संपादित करें पर क्लिक करें .. फिर एचटीएमएल के हेड टैग पर Google प्रीटीफाइड सीडीएन जोड़ें।

https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>

फिर इस स्क्रिप्ट के नीचे कोड स्निपेट के लिए थीम शामिल करें .. मैं रेगिस्तान थीम शामिल था।

<!--Desert theme-->
<style type='text/css'>pre .atn,pre .kwd,pre .tag{font-weight:700}pre.prettyprint{display:block;background-color:#333}pre .nocode{background-color:none;color:#000}pre .str{color:#ffa0a0}pre .kwd{color:khaki}pre .com{color:#87ceeb}pre .typ{color:#98fb98}pre .lit{color:#cd5c5c}pre .pln,pre .pun{color:#fff}pre .tag{color:khaki}pre .atn{color:#bdb76b}pre .atv{color:#ffa0a0}pre .dec{color:#98fb98}ol.linenums{margin-top:0;margin-bottom:0;color:#AEAEAE}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}@media print{pre.prettyprint{background-color:none}code .str,pre .str{color:#060}code .kwd,pre .kwd{color:#006;font-weight:700}code .com,pre .com{color:#600;font-style:italic}code .typ,pre .typ{color:#404;font-weight:700}code .lit,pre .lit{color:#044}code .pun,pre .pun{color:#440}code .pln,pre .pln{color:#000}code .tag,pre .tag{color:#006;font-weight:700}code .atn,pre .atn{color:#404}code .atv,pre .atv{color:#060}}</style>

अधिक विषयों के लिए, यहां जाएं .. थीम को सुंदर बनाएं

जब आप कोई पोस्ट बनाते हैं, तो संपादन मोड को विज़ुअल से HTML में बदलें और उस स्थान पर जाएं जहां आप कोड स्निपेट जोड़ने जा रहे हैं। फिर इस तरह के कोड शामिल करें।

<pre class="prettyprint">
  <code class="language-html">
      <!-- your code snippet -->
  </code>
</pre>

आप प्रासंगिक भाषा एचटीएमएल, सीएसएस, PHP, जावास्क्रिप्ट का चयन करके कोड शैली बदल सकते हैं ... यहां मैंने एक HTML कोड स्निपेट का उपयोग किया था।


Here वह समाधान है जो मेरे लिए काम करता है। गतिशील ब्लॉगर HTML के <head>...</head> में रखें:

<script>
$(window.blogger.ui()).on('viewitem', function (event, post, element) {
    prettyPrint();
});
</script>

http://alexgorbatchev.com/wiki/SyntaxHighlighter 2.0 जावा स्क्रिप्ट लाइब्रेरी का उपयोग करने का एक और समाधान है। मैंने इसे अपने ब्लॉग पर इस्तेमाल किया है और ऐसा लगता है कि यह काफी अच्छा काम करता है।

यहां इसके बारे में एक पोस्ट है:

http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.html http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.html http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.html http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.html

चीयर्स।






prettify