Blogger'da blog yazmak için kod snippet'lerini biçimlendirme [kapalı]

283

Blogum Blogger'da barındırılıyor ve sık sık C/ C#/ Java/ XMLvb. Kod parçacıkları gönderiyorum ama parçacığın "karıştırıldığını" görüyorum.

Snippet'i önceden ayrıştırmak ve biçimlendirmeyi sıralamak, XML " <" " <" "e dönüştürmek için kullanabileceğim herhangi bir web sitesi var mı?

SO üzerinde bu alanda bir dizi soru var ama bu soruyu doğrudan ele alan herhangi bir soru bulamadım.

Edit:İçin @Rich cevap, site devletleri "Sitenizde biçimlendirilmiş kodunu görüntülemek için, bu CSS stil almak ve kendisine bir başvuru eklemeniz gerekir <head>sayfanızın kısmına" . Sorun bu - Blogger AFAIK'te bunu yapamazsınız.

formatting blogs blogger

— rbrayb
kaynak

3

Biçimlendirilmiş kodu görüntülemek için: Visual studio kullanıyorsanız, herhangi bir tür kodu html / css / javascript / c # etc'yi blogger'a kopyalayabilirsiniz. Visual studio üretkenlik elektrikli el aletlerini kurmalısınız: daha fazla bilgi için okuyun: coding-issues.blogspot.in/2013/10/…

— Ranadheer Reddy

Eklentiyi Blogger çevrimdışı düzenleyicisi için Windows Live Yazar için Visual Studio Kodu Olarak Yapıştır'ı deneyin . WYSIWYG! .

— herohuyongtao

WordPress gibi sosyal içerik dolabını mı kaçırıyorsunuz ? şimdi bunu blogger'a da ekleyebilirsiniz stackoverflow.com/questions/27619171/…

— craig lerr

1

Bu web sitesini çeşitli diller için kod spinet vurgu kodunu almak için kullanabilirsiniz. size htite

— Bhavikkumar

Intellij'deki kodu kopyalayabilir ve blogunuza yapıştırabilirsiniz. Blogumda

— user3871494

253

Ben kullanarak blogger kod sözdizimi vurgulamasını nasıl ekleneceği açıklanmaktadır bir blog yazısı girişi oluşturduk SyntaxHighlighter 2.0

İşte blog yazım:

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

Umarım size yardımcı olur .. Yapabileceklerinden çok etkilendim.

— CraftyFella
kaynak

2

Bunun hala işe yarayıp yaramadığını kimse doğrulayabilir mi? Ben </head>bölüm önce komut dosyası etiket yapıştırma denedim ve benim kod etrafında da ön etiketi ekledi. Değişiklik yok.

— arviman

2

Üzerinde birkaç saat geçirdim ve hiç çalışamıyorum.

— Mart'ta resim

1

DYNAMIC view blogger için iyi çalışmıyor, herhangi bir alternatif sağlayabilir misiniz? heres dinamik görünüm ile blogumu satindersinght.blogspot.in

— Satinder singh

1

Kopyalayıp yapıştırmanız gereken kodun üst kısmında bir şey eksik gibi görünüyor, özellikle bir <script> etiketi.

— John Little

1

Samuel'in cevabı çok daha iyi. Sadece sözdizimi vurgulamak için bloguma çok fazla javascripts eklemekten hoşlanmıyorum. Özellikle yüksek ışıklı sözdizimi olmayan sayfalar aşırıya kaçar.

— divinedragon

126

Kod paylaşmanın en kolay yolu, herkese açık bir özdir. Sadece bir tane yaz ve gömme koduna yapıştır. Tereyağından kıl çeker gibi.

http://gist.github.com

Arama motoru sorununu çözmek için div, sayfada gizli olan şu kadar basit kullanılabilir:

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

— yodaisgreen
kaynak

ahbap, 20 dakika kadar kullandıktan sonra sana yeterince teşekkür edemem! En iyi biçimlendirme, hussle yok, tüm kod tek bir yerde, gönderiler sadece güzel görünüyor, bir gönderinin düzenlenmesi inanılmaz derecede kolaydır, çünkü kodu yazının geri kalanıyla karıştırmayın ve asla endişelenmeyin aptalca bir şey ve herhangi bir kodu kaybetmek / yanlış biçimlendirmek. Teşekkürler adamım!

— Elijah Saounkine

19

Gömme javascripttir, arama yapmak için görünmez olma ihtimali yüksektir. Bu blog gönderileri için hemen hemen onu öldürüyor.

— James Moore

6

Şu anda gist kullanıyorum ama muhtemelen tekrar SyntaxHighlighter kullanacağım. Sadece gist'ler JavaScript'i (RSS okuyucularında da erişilemez hale getirir) kullanmakla kalmaz, aynı zamanda her gist, sırayla oluşturmayı engelleyerek indirildiğinden sayfa yüklemesini yavaşlatır. İyi bir seçim değil.

— Tomasz Nurkiewicz

Teşekkürler! Günümü gün ettin. Blogger'a özgeçmiş

— daniel.sedlacek

1

Bu fikir gerçekten işe yarıyor! sonuç sadece ihtiyacım olan şey; güzel biçimlendirilmiş kod ... ama onunla devam etmeyeceğim. Kendi görevimin kendi içinde ve dışında tamamlanmasını tercih ederim. Gönderinin bir parçası olan, başka bir yerde barındırılan ve js aracılığıyla dahil edilen kodun olması, onu yener!

— dade

63

Blogum için kaynak kodunu biçimlendirmek üzere http://hilite.me/ adresini kullanıyorum . Oldukça temiz html formatları ve çıkışları çok destekler. Ancak çok sayıda kod parçacıkları varsa, o zaman çok fazla kopya yapıştır yapmanız gerekir. Python kodunu biçimlendirmek için Pygments ( blog yazısı ) kullandım.

— Samuel
kaynak

Ben kullanmayı kullanılan hilite.me ama şimdi tercih dillinger.io

— GoYun.Info

Ben de gist.github tercih ederim. Javascript ve ek stil / css gerekmez. Teşekkürler bayım.

— Prabowo Murti

40

Bu css betiği herkes için yararlı olabilir - Sözdizimi vurgulama için değil, kaynak kodunu orijinal biçimde sunmak için iyi çalışır:

 <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>

Nasıl kullanılır :

Bu snippet'i metin düzenleyicisine yapıştırın,
kodunuzu <<<<<< >>>>>> bloğa yapıştırın.
Tümünü kopyala ve
blogger (veya başka bir) yayın düzenleyicide HTML görünümüne yapıştırın.

FAYDALARI: Basit ve kullanımı kolay, daha az yapılandırma, yeniden yapılandırılması kolay, ekstra yazılım yok

— gtiwari333
kaynak

1

Bence en basit ve temiz cevap. Sadece dahili bir CSS oluşturun ve hazırsınız.

— Rishik Mani

benim için de iyi çalışıyor. basit çözüm

— Hasitha

15

Bu SyntaxHighlighter ile oldukça kolay bir şekilde yapılabilir. Ben Blogger'da SyntaxHighlighter oluşturmaya yönelik adım adım talimatları blogumda. SyntaxHighlighter'ın kullanımı çok kolaydır. Parçacıkları ham formda yayınlamanızı ve ardından aşağıdaki pregibi bloklara sarmanızı sağlar :

<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>

Fırça adını "python" veya "java" veya "javascript" olarak değiştirin ve istediğiniz kodu yapıştırın. CDATA etiketleme, varlığın kaçışını veya kod bloglamanın diğer tipik rahatsızlıklarını düşünmeden hemen hemen herhangi bir kodu koymanıza izin verir.

— Alain O'Dea
kaynak

1

Talimatların benim için diğer önde gelen cevaptan daha iyi çalıştı. Durumda herkes, onları aramaya kendilerini bulur burada paketlenmiş fırçalar ve diğer adları listesi aşağıdadır.

— Scott

13

1. İlk olarak, blogger şablon yedeğini almak
2. o açık blogger şablonunda (In HTML Düzenle modu) & Sonuçta css kopyalamak bağlantıda verilen önce </b:skin>etiketi
3. önce followig kodu yapıştırın </head>etiketi

<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> Etiketin önüne aşağıdaki kodu yapıştırın .

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

5. Blogger Şablonunu kaydedin.
6. Artık sözdizimi vurgulama kullanıma hazırdır <pre></pre>.

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

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

7. Kodunuzu buradan kaçabilirsiniz .
8. İşte<class> özellik için desteklenen dil listesi .

— Mahesh Meniya
kaynak

Güzel bir bağlantı. Renk biçimli olsaydı daha iyi olurdu! +1

— Gaʀʀʏ

@ le_garry: teşekkürler kod snippet'i biçimlendirirken bir sorunla karşılaştım, bu yüzden renkli değil.

— Mahesh Meniya

Cevap cevabına bakınız. Şimdiye kadar gördüğüm en iyi vurgulayıcı ve renk veriyor.

— Gaʀʀʏ

@le_garry Ohh Blogger'da sözdizimini vurgulamayı düşünüyorsunuz. Cevabımı aldığınızı yanlış anlıyorum Yani, bazı problemlerle karşılaştığım için üzgünüm ..

— Mahesh Meniya

@MaheshMeniya sözdizimi sözdizimi için yazdığınız tüm adımları takip ettim ama çalışmıyor, eklediğim herhangi bir ekstra düşünme var mı?

— AA.SC

9

http://formatmysourcecode.blogspot.co.uk/ iyi çalışıyor, sadece kopyala, biçimlendir, yapıştır.

— Gob00st
kaynak

Bunu blogum için kullanıyorum. Renkleri seven insanlar için bu renk kodunu renklendirmez! Ben sade ve basit seviyorum.

— Aravind

5

Oldukça düşük bir teknoloji çözümü kullanıyorum. Bu çevrimiçi sözdizimi vurgulama aracını kullanarak kodu biçimlendirip blog'a yapıştırıyorum

— Phil Hale
kaynak

Yup - tohtml, TechNet Wiki tarafından kod yapıştırmak için önerilen çözümdür!

— rbrayb

@Phil Hale Bu araçta girinti yok

— user2771655

Bu şimdiye kadar bulduğum en iyi çözüm. Teşekkür ederim

— Kinjal

5

İşte kodunuzu biçimlendirecek ve html tükürecek bir site ve sözdizimi renklendirmesi için satır içi stiller bile içeriyor. Tüm ihtiyaçlarınız için çalışmayabilir , ancak iyi bir başlangıçtır. Genişletmek istiyorsanız kaynağı kullanılabilir hale getirdiğine inanıyorum:

— Zengin
kaynak

Artık çalışmıyor.

— И Г И І И О

4

İşi yapacak bir araç yarattım. Blogumda bulabilirsiniz:

Ücretsiz Online C # Kod Renklendirici

Araç, C # kodunuzu renklendirmenin yanı sıra, onları '& lt;' biçimine dönüştüren tüm '<' ve '>' sembollerine de dikkat eder. ve '& gt;'. Sekmeler, farklı tarayıcılarda aynı görünmek için boşluklara dönüştürülür. Blogunuza veya web sitenize bir CSS stil sayfası eklemek istemiyorsanız veya istemiyorsanız, renklendiriciyi satır içi CSS stillerini bile yapabilirsiniz.

— Pavel Vladov
kaynak

3

Blogger destekli blogumla SyntaxHighlighter kullanıyorum . Asıl site, Blogger'ın yerine kendi sunucumda barındırılıyor (Blogger'ın kendi sitenize yayın gönderme seçeneği var), ancak kendi alan adınıza ve web barındırma hizmetinize sahip olmak ayda sadece birkaç dolara mal oluyor.

— Pete Kirkham
kaynak

Kabul etti - kendi blogumu barındırıyorsam birkaç seçenek var, ancak blog aslında Blogger tarafından barındırıldığında çok fazla destek görünmüyor.

— rbrayb

3

Blogger ile kullanımı kolaylaştıran SyntaxHighlighter 2.0 ile bazı değişiklikler yapılmış gibi görünüyor .

Orada olan sürümlerini barındırılan stilleri ve Javascriptleri de: http://alexgorbatchev.com/pub/sh/

— Daniel Ballinger
kaynak

2

Aslında bunun için Vim (başka ne ;-)) kullanmıştı: 2html "eklentisi" var. Dokümanlara buradan bakın .

Kodumu düzenlerken, onu sadece HTML'ye dönüştürüyorum ve sonuçları Blogger'ın HTML düzenleyicisine yapıştırıyorum.

Not: Çok güzel bir HTML değil (gömülü css daha iyi olurdu), ama sadece çalışır.

Oh: ve birkaç dil için sözdizimi dosyaları var, bu da onu oldukça kullanışlı hale getiriyor.

— Zsolt Botykai
kaynak

1

Emacs'a özel cevap: Blogcu söz konusu olduğunda, satır içi css'ye izin verir. Javascript tabanlı vurgulayıcılarla ilgili sorun, renk düzeniyle yaşamak veya kendi uygulamanızı uygulamak zorunda olmanızdır. Ancak, benim gibi, kendi emacs renk düzeninizin hayranıysanız, daha iyi bir seçeneğiniz var. Emacs aşağıdaki dört işlevi eklemek için "htmlize.el" paketini kesmek var ...

blog HTMLize tamponu
blog-HTMLize-bölge
blog-HTMLize-tampon-ile-Linum
blog-HTMLize-bölge-ile-Linum

Bu işlevler, doğrudan blog postanızda kullanabileceğiniz emacs'ta yeni bir arabellekte kopyala yapıştırmaya hazır html (satır içi stilli) çıktılar. Çıktı, kodu emacs'de (renk şeması dahil) gördüğünüzle tamamen aynı görünüyor.

İşte benim blog "link-htmlize.el" emacs ile nasıl kullanılacağı hakkında ayrıntılı bilgi bulabilirsiniz. Bu, "küçüktür" ve "büyüktür" işaretlerini de html kodlamasıyla ortadan kaldırır. Ve emacs tüm vurgulama ve stil yapıyor gibi, js kütüphanesi snippet'lerin dilini destekleyip desteklemediği konusunda endişelenmenize gerek yok, ne de blogger'da şablon kodunuzla uğraşmak zorunda değilsiniz.

Elisp dosyasını burada bulabilirsiniz (dosyayı blog-htmlize.el kaydedin )

— Sujeet
kaynak

0

Ben kendi F # ( bu soruya bakın ) yuvarlandı , ama yine de mükemmel değil (sadece regexps yapmak, bu yüzden sınıfları veya yöntem adları vb tanımıyorum.).

Temel olarak, söyleyebileceğim kadarıyla, Oluştur ve HTML modu arasında geçiş yaparsanız blogcu editörü bazen açılı parantezinizi yiyecektir. Bu yüzden HTML moduna yapıştırmanız ve ardından doğrudan kaydetmeniz gerekir. (Bu konuda yanlış olabilir, şimdi denedim ve işe yarıyor gibi görünüyor - tarayıcıya bağımlı mı?)

Jenerikleriniz olduğunda bu korkunç!

— Benjol
kaynak

0

Html, javascript, c # ve java'nızı yüklemek için özel karakterleri HTML koduna dönüştürmelisiniz. olarak '<'olduğu gibi <ve '>'etmek >vb

Bu bağlantı Kodu Dönüştürücüyü iGoogle'a ekleyin . Bu, özel karakterleri dönüştürmenize yardımcı olacaktır.

Daha sonra kodunuzu blogger'da özelleştirmek için SyntaxHighlighter 3.0.83 yeni sürümünü ekleyin . Ancak blogger şablonunuzda sözdizimiHighlighter nasıl yapılandırılacağını bilmelisiniz.

— Mdhar9e
kaynak