ब्लॉगर पर ब्लॉगिंग के लिए कोड स्निपेट बनाना [बंद]


282

मेरे ब्लॉग को ब्लॉगर पर होस्ट किया गया है और मैं अक्सर C/ C#/ Java/ XMLआदि में कोड स्निपेट पोस्ट करता हूं, लेकिन मुझे लगता है कि स्निपेट को "मैनगेट" मिल जाता है।

क्या ऐसी कोई वेब साइटें हैं जिनका उपयोग मैं स्निपेट को पहले से पार्स करने और फॉर्मेटिंग को छाँटने के लिए कर सकता हूं, XML " <" को &lt;"आदि " में कनवर्ट करें ।

इस क्षेत्र पर SO के आसपास कई प्रश्न हैं, लेकिन मुझे इस प्रश्न का कोई भी पता नहीं है।

Edit:के लिए @Rich जवाब है, साइट राज्यों "अपनी साइट पर स्वरूपित कोड प्रदर्शित करने के लिए, तो आप इस CSS स्टाइलशीट मिलता है, और में इसे करने के लिए एक संदर्भ जोड़ने की जरूरत है <head>अपने पेज के अनुभाग" । यही समस्या है - आप ब्लॉगर AFAIK पर ऐसा नहीं कर सकते।


3
स्वरूपित कोड प्रदर्शित करने के लिए: यदि आप दृश्य स्टूडियो का उपयोग कर रहे हैं, तो आप किसी भी प्रकार के कोड html / css / javascript / c # आदि को ब्लॉगर में कॉपी कर सकते हैं। आपको दृश्य स्टूडियो उत्पादकता बिजली उपकरण स्थापित करना होगा: अधिक जानकारी के लिए पढ़ें: coding-issues.blogspot.in/2013/10/…
Ranadheer Reddy

ब्लॉगर ऑफ़लाइन संपादक के लिए विंडोज लाइव राइटर के लिए विज़ुअल स्टूडियो कोड के रूप में प्लग-इन पेस्ट का प्रयास करें । WYSIWYG!
हरोहुयंगताओ

क्या आप वर्डप्रेस की तरह सामाजिक सामग्री लॉकर को याद कर रहे हैं ? अब आप इसे ब्लॉगर में भी जोड़ सकते हैं stackoverflow.com/questions/27619171/…
craig lerr

1
आप इस वेब साइट का उपयोग विभिन्न भाषा के लिए कोड स्पिनेट हाइलाइट कोड प्राप्त करने के लिए कर सकते हैं। यह आपको html प्रदान करता है आप इसे अपने ब्लॉग hilite.me
Bhavikkumar

आप कोड को intellij में कॉपी कर सकते हैं और अपने ब्लॉग में पेस्ट कर सकते हैं। यह मेरे ब्लॉग में मेरे लिए एक आकर्षण की तरह काम करता है - codetails.blogspot.com/2017/11/design-pattern-in-java.html
user3871494

जवाबों:


253

मैं एक ब्लॉग पोस्ट प्रविष्टि का उपयोग करके ब्लॉगर कोड वाक्य रचना हाइलाइटिंग जोड़ने के बारे में बताते हैं जो बना लिया है SyntaxHighlighter 2.0

यहाँ मेरा ब्लॉग पोस्ट है:

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

मुझे आशा है कि यह आप लोगों की मदद करता है .. मैं इससे प्रभावित हूं कि यह क्या कर सकता है।


2
क्या कोई पुष्टि कर सकता है कि क्या यह अभी भी काम करता है? मैंने </head>खंड से ठीक पहले स्क्रिप्ट टैग चिपकाने की कोशिश की और अपने कोड के आसपास प्री टैग भी जोड़ा। हालांकि कोई बदलाव नहीं।
अरविमान

2
मैंने इस पर कुछ घंटे बिताए और मुझे यह काम करने के लिए नहीं मिला।
Thepaulpage

1
डायनामिक देखने वाले ब्लॉगर के लिए इसका काम ठीक नहीं है, क्या आप कोई विकल्प प्रदान कर सकते हैं? डायनेमिक दृश्य के साथ मेरे ब्लॉग heres satindersinght.blogspot.in
सतिंदर सिंह

1
ऐसा लगता है कि जिस कोड को आप कॉपी और पेस्ट करना चाहते हैं, वह सबसे ऊपर है, विशेष रूप से <script> टैग।
जॉन लिटिल

1
सैमुअल का जवाब बहुत बेहतर है। मैं अपने ब्लॉग पर इतने सारे javascripts को केवल एक मात्र वाक्य रचना हाइलाइटिंग के लिए जोड़ना पसंद नहीं करता। विशेष रूप से जिन पृष्ठों में उच्च-प्रकाश होने के लिए कोई वाक्यविन्यास नहीं है, वे ओवरकिल हैं।
दिव्यदर्शन

126

कोड साझा करने के लिए सबसे आसान तरीका एक सार्वजनिक जिस्ट है। बस एक कोड लिखें और एम्बेड कोड में पेस्ट करें। बहुत आसान।

http://gist.github.com

खोज इंजन समस्या को हल करने के लिए, कोई भी divपृष्ठ पर छिपे हुए का उपयोग कर सकता है :

<div style="display:none"> content </div>

यार, इसे 20 मिनट के लिए उपयोग करने के बाद, मैं आपको पर्याप्त धन्यवाद नहीं दे सकता! सबसे अच्छा स्वरूपण, कोई झंझट नहीं है, सभी कोड एक ही स्थान पर हैं, पोस्ट सिर्फ सुंदर दिखती हैं, एक पोस्ट का संपादन अविश्वसनीय रूप से आसान है क्योंकि आप कोड को बाकी पोस्ट के साथ नहीं मिलाते हैं और कभी भी चिंता नहीं करते हैं कि आप करते हैं कुछ बेवकूफ और किसी भी कोड को खोना / गलत करना। थॅंक्स यार!
एलिजा सौनकिन

19
एम्बेड जावास्क्रिप्ट है, यह खोज करने के लिए अदृश्य है एक अच्छा मौका है। यह बहुत ज्यादा इसे ब्लॉग पोस्ट के लिए मारता है।
जेम्स मूर

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

धन्यवाद! आपने मेरा दिन बना दिया। मैं सिर्फ ब्लॉगर में gist जोड़ने के लिए इस स्क्रिप्ट को साझा करूँगा: github.com/moski/gist-Blogger
daniel.sedlacek

1
यह विचार वास्तव में ठीक काम करता है! परिणाम सिर्फ मैं चाहता हूँ की जरूरत है; अच्छी तरह से स्वरूपित कोड ... लेकिन मैं इसके साथ नहीं जाऊँगा। मैं बल्कि अपने पद को अपने आप में और पूर्ण होना चाहूंगा। कोड का होना, जो कि पोस्ट का हिस्सा है, कहीं और होस्ट किया गया और js के माध्यम से शामिल किया गया, बस हार गया!
डेड

63

अपने ब्लॉग के लिए मैं स्रोत कोड को प्रारूपित करने के लिए http://hilite.me/ का उपयोग करता हूं । यह HTML को साफ करने के बजाय बहुत सारे प्रारूप और आउटपुट का समर्थन करता है। लेकिन अगर आपके पास बहुत सारे कोड स्निपेट हैं तो आपको बहुत सारे कॉपी पेस्ट करने होंगे। Python कोड को फॉर्मेट करने के लिए मैंने Pyolution ( ब्लॉग पोस्ट ) का भी उपयोग किया है ।


मैं hilite.me का उपयोग करता था , लेकिन अब मैं dillinger.io को
GoYun.Info

मैं यह भी पसंद करते हैं gist.github कोई जावास्क्रिप्ट और अतिरिक्त शैली / सीएसएस की आवश्यकता नहीं है। शुक्रिया जनाब।
प्रबावो मूर्ति

40

यह सीएसएस स्क्रिप्ट सभी के लिए उपयोगी हो सकती है - यह सिंटैक्स हाइलाइटिंग के लिए नहीं है, लेकिन मूल प्रारूप में स्रोत कोड प्रस्तुत करने के लिए अच्छी तरह से काम करता है:

 <pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; 
                color: #000000; background-color: #eee;
                font-size: 12px; border: 1px dashed #999999;
                line-height: 14px; padding: 5px; 
                overflow: auto; width: 100%">
       <code style="color:#000000;word-wrap:normal;">

            <<<<<<<YOUR CODE HERE>>>>>>>

       </code>
 </pre>

कैसे इस्तेमाल करे :

  1. इस स्निपेट को टेक्स्ट एडिटर में पेस्ट करें,
  2. <<<<<<< >>>>>> ब्लॉक में अपना कोड पेस्ट करें।
  3. सभी को कॉपी और
  4. ब्लॉगर (या किसी अन्य) पोस्ट संपादक में HTML दृश्य में पेस्ट करें।

लाभ: सरल और उपयोग करने में आसान, कम कॉन्फ़िगरेशन, पुन: कॉन्फ़िगर करने में आसान, कोई अतिरिक्त सॉफ़्टवेयर नहीं


1
मेरी राय में सबसे सरल और साफ जवाब। बस एक आंतरिक सीएसएस बनाएं और आप जाने के लिए अच्छे हैं।
ऋषिक मणि

मेरे लिए भी ठीक काम कर रहा है। सरल उपाय
Hasitha

15

यह SyntaxHighlighter के साथ काफी आसानी से किया जा सकता है। मेरे पास अपने ब्लॉग पर Blogger में SyntaxHighlighter स्थापित करने के लिए चरण-दर-चरण निर्देश हैं । SyntaxHighlighter का उपयोग करना बहुत आसान है। यह आपको कच्चे रूप में स्निपेट पोस्ट करने देता है और फिर उन्हें preब्लॉकों में लपेटता है जैसे:

<pre name="code" class="brush: erlang"><![CDATA[
-module(trim).

-export([string_strip_right/1, reverse_tl_reverse/1, bench/0]).

bench() -> [nbench(N) || N <- [1,1000,1000000]].

nbench(N) -> {N, bench(["a" || _ <- lists:seq(1,N)])}.

bench(String) ->
    {{string_strip_right,
    lists:sum([
        element(1, timer:tc(trim, string_strip_right, [String]))
        || _ <- lists:seq(1,1000)])},
    {reverse_tl_reverse,
    lists:sum([
        element(1, timer:tc(trim, reverse_tl_reverse, [String]))
        || _ <- lists:seq(1,1000)])}}.

string_strip_right(String) -> string:strip(String, right, $\n).

reverse_tl_reverse(String) ->
    lists:reverse(tl(lists:reverse(String))).
]]></pre>

बस ब्रश का नाम "अजगर" या "जावा" या "जावास्क्रिप्ट" में बदलें और अपनी पसंद के कोड में पेस्ट करें। CDATA टैगिंग करते हैं कि आप इकाई से बचने या कोड ब्लॉगिंग की अन्य विशिष्ट परेशानियों के बारे में चिंता किए बिना वहां बहुत अधिक कोड डालते हैं।


1
आपके निर्देशों ने अन्य प्रमुख उत्तर की तुलना में मेरे लिए बेहतर काम किया। यदि कोई व्यक्ति खुद को उनकी तलाश में पाता है, तो यहां बंडल ब्रश और उनके उपनाम की सूची दी गई है।
स्कॉट

13

1. सबसे पहले, अपने ब्लॉगर टेम्पलेट का बैकअप ले
2. कि खुला अपने ब्लॉगर टेम्पलेट (में HTML संपादित करें मोड) और आखिर सीएसएस कॉपी इस लिंक में दिए गए पहले </b:skin>टैग
3. पहले followig कूट डालें </head>टैग

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>

4.</body> टैग से पहले निम्नलिखित कोड पेस्ट करें ।

<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

5. ब्लॉगर टेम्पलेट सहेजें।
6. अब सिंटैक्स हाइलाइटिंग उपयोग के लिए तैयार है आप इसे <pre></pre>टैग के साथ उपयोग कर सकते हैं ।

<pre name="code">
...Your html-escaped code goes here...
</pre>

<pre name="code" class="php">
    echo "I like PHP";
</pre>

7. आप यहां अपना कोड एस्केप कर सकते हैं
8. यहाँ<class> विशेषता के लिए समर्थित भाषा की सूची दी गई है ।


एक अच्छी कड़ी। बेहतर होगा अगर इसे रंग-रूप दिया जाए! +1
19

@le_garry: धन्यवाद मुझे कुछ समस्या का सामना करना पड़ा जबकि कोड स्निपेट को प्रारूपित करना इसलिए यह रंग में नहीं है।
महेश मेनिया

इसका जवाब देखें। सबसे अच्छा हाइलाइटर मैंने अब तक देखा है, और यह रंग करता है।
Ga

@le_garry ओह आप ब्लॉगर में सिंटैक्स को हाइलाइट करने के बारे में ले रहे हैं यह रंग के साथ बारीक काम करता है। मुझे गलतफहमी है कि आप मेरे उत्तर के बारे में ले रहे हैं, इसलिए मुझे दुःख हुआ कि मुझे कुछ
संभावना

@MaheshMeniya मैंने सिंटैक्स सिंटैक्सिहलाइटर के लिए आपके द्वारा लिखे गए सभी चरणों का पालन किया, लेकिन इसके काम नहीं कर रहा है, क्या कोई अतिरिक्त विचार है जो मुझे याद आ रहा है?
AA.SC

9

http://formatmysourcecode.blogspot.co.uk/ ठीक काम करता है, आप बस कॉपी, प्रारूप, पेस्ट करें।


मैं अपने ब्लॉग के लिए इसका उपयोग करता हूं। जो लोग रंगों से प्यार करते हैं, उनके लिए यह रंग कोड नहीं है! मैं इसे सादा और सरल प्यार करता हूँ।
अरविंद

5

मैं काफी कम तकनीकी समाधान का उपयोग करता हूं। मैं इस ऑनलाइन सिंटैक्स हाइलाइटिंग टूल का उपयोग करके कोड को प्रारूपित करता हूं और फिर इसे ब्लॉग में पेस्ट करता हूं


कोड पेस्ट करने के लिए TechNet विकी द्वारा पुन: संशोधित के रूप में Yup - tohtml इसका समाधान है!
रबायब

@ पैल हेल उस टूल में कोई इंडेंटेशन नहीं है
user2771655

यह अब तक का सबसे अच्छा समाधान है। धन्यवाद
किंजल

5

यहां एक साइट है जो आपके कोड को प्रारूपित करेगी और html को थूक देगी, और इसमें सिंटैक्स रंग के लिए इनलाइन शैली भी शामिल है। हो सकता है कि यह आपकी सभी जरूरतों के लिए काम न करे , लेकिन एक अच्छी शुरुआत है। मेरा मानना ​​है कि अगर आप इसे बढ़ाना चाहते हैं तो उन्होंने स्रोत उपलब्ध कराया है:


अब काम नहीं करता है।
19 Г И О И О

4

मैंने एक टूल बनाया है जो काम पूरा करता है। आप इसे मेरे ब्लॉग पर पा सकते हैं:

नि: शुल्क ऑनलाइन सी # कोड Colorizer

अपने C # कोड को रंगीन करने के अलावा, टूल सभी '<' और '>' प्रतीकों का भी ध्यान रखता है और उन्हें '& lt;' में परिवर्तित करता है। और '& gt;' विभिन्न ब्राउज़रों में समान दिखने के लिए टैब को रिक्त स्थान में बदल दिया जाता है। यदि आप ऐसा नहीं कर सकते हैं या आप ब्लॉग या वेबसाइट में CSS स्टाइल शीट नहीं डालना चाहते हैं, तो आप colorizer को CSS स्टाइल इनलाइन भी बना सकते हैं।


3

मैं अपने Blogger संचालित ब्लॉग के साथ SyntaxHighlighter का उपयोग करता हूं। वास्तविक साइट को ब्लॉगर के बजाय मेरे स्वयं के सर्वर पर होस्ट किया गया है (ब्लॉगर के पास आपकी अपनी साइट पर पोस्ट करने के विकल्प हैं), लेकिन आपके स्वयं के डोमेन और वेब होस्टिंग में केवल एक महीने में कुछ डॉलर खर्च होते हैं।


सहमत - अगर मैं अपने स्वयं के ब्लॉग की मेजबानी करता हूं तो कई विकल्प हैं लेकिन जब ब्लॉगर वास्तव में ब्लॉग की मेजबानी करता है तो बहुत अधिक समर्थन नहीं लगता है।
रबायब


2

वास्तव में मैंने इसके लिए (और क्या ;-)) का उपयोग किया था: इसमें एक 2html "प्लगइन" है। यहां डॉक्स देखें ।

इसलिए जैसे ही मैं अपना कोड संपादित करता हूं, मैं इसे केवल HTML में बदल देता हूं और परिणामों को ब्लॉगर के HTML संपादक पर चिपका देता हूं।

नोट: यह इतना सुंदर HTML नहीं है (एम्बेडेड सीएसएस बेहतर होगा), लेकिन यह सिर्फ काम करता है।

ओह: और इसमें कई भाषाओं के लिए वाक्यविन्यास फ़ाइलें हैं जो इसे बहुत उपयोगी बनाती हैं।


1

Emacs विशिष्ट उत्तर: जहां तक ​​ब्लॉगर का संबंध है, यह इनलाइन css की अनुमति देता है। जावास्क्रिप्ट आधारित हाइलाइटर्स के साथ समस्या यह है कि आपको उनकी रंग योजना के साथ रहना होगा या अपना स्वयं का कार्यान्वयन करना होगा। लेकिन, मेरी तरह, यदि आप अपनी खुद की एमएसीएस रंग योजना के प्रशंसक हैं, तो आपके पास एक बेहतर विकल्प उपलब्ध है। मैं emacs के लिए "htmlize.el" पैकेज को हैक करके निम्नलिखित चार कार्य जोड़ रहा हूं ...

  1. ब्लॉग-htmlize-बफर
  2. ब्लॉग-htmlize-क्षेत्र
  3. ब्लॉग-htmlize-बफ़र-साथ-Linum
  4. ब्लॉग-htmlize-क्षेत्र-साथ-Linum

ये फ़ंक्शन कॉपी-पेस्ट तैयार html (इनलाइन स्टाइल) को emacs में एक नए बफर में आउटपुट करेंगे, जिसे आप सीधे अपने ब्लॉग पोस्ट में उपयोग कर सकते हैं। आउटपुट बिल्कुल वैसा ही दिखता है जैसा कि आपको emacs (कलर स्कीम सहित) में कोड दिखाई देगा।

यहाँ मेरे ब्लॉग की एक कड़ी है , जहाँ आप इमैक के साथ "ब्लॉग-htmlize.el" का उपयोग करने के बारे में विस्तृत जानकारी पा सकते हैं। यह html-एन्कोडिंग "कम से कम" और "संकेत से भी अधिक" के साथ दूर करता है। और जैसा कि एमएसीएस सभी हाइलाइटिंग और स्टाइलिंग कर रहा है, आपको इस बारे में चिंता करने की ज़रूरत नहीं है कि जेएस लाइब्रेरी आपके स्निपेट्स की भाषा का समर्थन करती है, और न ही आपको ब्लॉगर में अपने टेम्पलेट कोड के साथ ध्यान केंद्रित करना है।

आप यहाँ पर क्विक फाइल पा सकते हैं (फाइल को ब्लॉग- htmlize.el के रूप में सेव करें )


0

मैंने F # में अपना स्वयं का रोल किया ( यह प्रश्न देखें ), लेकिन यह अभी भी सही नहीं है (मैं अभी regexps करता हूं, इसलिए मैं कक्षाओं या विधि के नाम आदि को नहीं पहचानता)।

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

यह बहुत भयानक है जब आपके पास जेनरिक है!


0

अपने html, javascript, c # और java पोस्ट करने के लिए आपको विशेष वर्णों को HTML कोड में बदलना चाहिए। जैसा '<'कि &lt;और '>', &gt;और आदि।

इस लिंक कोड कनवर्टर को iGoogle में जोड़ें । यह आपको विशेष वर्णों को परिवर्तित करने में मदद करेगा।

फिर अपने कोड को ब्लॉगर में अनुकूलित करने के लिए SyntaxHighlighter 3.0.83 नया संस्करण जोड़ें । लेकिन आपको पता होना चाहिए कि अपने ब्लॉगर टेम्पलेट में सिंटैक्सHighlighter कैसे कॉन्फ़िगर करें।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.