Memformat cuplikan kode untuk blog di Blogger [ditutup]

282

Blog saya di-host di Blogger dan saya sering memposting snipet kode di C/ C#/ Java/ XMLdll. Tapi saya merasa snippetnya "rusak".

Apakah ada situs web yang dapat saya gunakan untuk mem-parsing cuplikan sebelumnya dan memilah format, mengonversi XML " <" menjadi " &lt;" dll.

Ada sejumlah pertanyaan di sekitar area ini pada SO tetapi saya tidak dapat menemukan yang menjawab pertanyaan ini secara langsung.

Edit:Untuk jawaban @Rich , situs menyatakan "Untuk menampilkan kode yang diformat di situs Anda, Anda perlu mendapatkan stylesheet CSS ini, dan menambahkan referensi ke sana di <head>bagian halaman Anda" . Itulah masalahnya - Anda tidak dapat melakukan ini di Blogger AFAIK.

formatting  blogs  blogger 
— rbrayb
sumber
3
Untuk menampilkan kode yang diformat: Jika Anda menggunakan visual studio, maka Anda dapat menyalin semua jenis kode html / css / javascript / c # dll ke blogger. Anda harus menginstal alat-alat pembangkit produktivitas visual studio: untuk info lebih lanjut baca: coding-issues.blogspot.in/2013/10/…
— Ranadheer Reddy
Cobalah plug-in Tempel Sebagai Kode Visual Studio untuk Windows Live Writer untuk editor offline Blogger. WYSIWYG! .
— herohuyongtao
Apakah Anda kehilangan loker konten sosial seperti WordPress? sekarang Anda dapat menambahkan ini di blogger juga stackoverflow.com/questions/27619171/…
— craig lerr
1
Anda dapat menggunakan situs web ini untuk mendapatkan kode sorot kode spinet untuk berbagai bahasa. itu memberi Anda html Anda dapat mempostingnya di blog Anda hilite.me
— Bhavikkumar
Anda dapat menyalin kode di intellij dan menempel di blog Anda. Ini berfungsi seperti pesona bagi saya di blog saya - codetails.blogspot.com/2017/11/design-pattern-in-java.html
— user3871494

Jawaban:

253

Saya telah membuat entri posting blog yang menjelaskan cara menambahkan kode sorotan ke blogger menggunakan syntaxhighlighter 2.0

Inilah posting blog saya:

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

Saya harap ini membantu kalian .. Saya cukup terkesan dengan apa yang bisa dilakukannya.

— CraftyFella
sumber
2
Adakah yang bisa mengkonfirmasi apakah ini masih berfungsi? Saya mencoba menempelkan tag skrip tepat sebelum </head>bagian dan menambahkan tag pra sekitar kode saya juga. Tidak ada perubahan.
— arviman
2
Saya menghabiskan beberapa jam di atasnya dan saya tidak bisa mendapatkan ini bekerja sama sekali.
— Terima kasih
1
Ini tidak berfungsi dengan baik untuk blogger tampilan DINAMIK, dapatkah Anda memberikan alternatif lain? inilah blog saya dengan tampilan dinamis satindersinght.blogspot.in
— Satinder singh
1
Sepertinya kode yang harus Anda salin dan tempelkan ada sesuatu yang hilang di bagian atas, khususnya tag <script>.
— John Little
1
Jawaban Samuel jauh lebih baik. Saya tidak suka menambahkan begitu banyak javascripts di blog saya hanya untuk menyoroti sintaks belaka. Terutama halaman-halaman yang tidak memiliki sintaks tinggi untuk disorot adalah berlebihan.
— divinedragon
126

Cara termudah untuk berbagi kode adalah dengan intisari publik. Cukup tulis satu dan tempel di kode sematan. Peasy mudah.

http://gist.github.com

Untuk mengatasi masalah mesin pencari, seseorang dapat menggunakan disembunyikan divdi halaman sesederhana:

<div style="display:none"> content </div>
— yodaisgreen
sumber
Bung, setelah menggunakannya selama 20 menit, saya tidak bisa cukup berterima kasih! Pemformatan terbaik, jangan hussle, semua kode ada di satu tempat, postingannya terlihat cantik, pengeditan posting sangat mudah karena Anda tidak mencampur kode dengan sisa postingan dan tidak pernah khawatir Anda melakukannya sesuatu yang bodoh dan kehilangan / salah format kode apa pun. Terima kasih kawan!
— Elijah Saounkine
19
Sematan adalah javascript, ada peluang bagus itu tidak terlihat untuk dicari. Itu cukup banyak membunuhnya untuk posting blog.
— James Moore
6
Saat ini saya menggunakan inti tetapi saya mungkin akan menggunakan SyntaxHighlighter lagi. Tidak hanya intisari yang menggunakan JavaScript (yang membuatnya tidak dapat diakses di pembaca RSS juga) tetapi juga memperlambat pemuatan halaman karena setiap intisari diunduh secara berurutan memblokir render. Bukan pilihan yang bagus.
— Tomasz Nurkiewicz
Terima kasih! Anda membuat hari saya. Saya hanya akan membagikan skrip ini untuk menambahkan intisari ke blogger: github.com/moski/gist-Blogger
— daniel.sedlacek
1
Ide ini benar-benar berfungsi dengan baik! hasilnya hanya ingin saya butuhkan; kode diformat dengan baik ... tapi saya tidak akan pergi dengan itu. Saya lebih suka memiliki posting saya untuk menyelesaikan masuk dan keluar sendiri. Memiliki kode, yang merupakan bagian dari pos, di-host di tempat lain dan dimasukkan melalui js, cukup dikalahkan!
— dade
63

Untuk blog saya, saya menggunakan http://hilite.me/ untuk memformat kode sumber. Ini mendukung banyak format dan output html yang agak bersih. Tetapi jika Anda memiliki banyak potongan kode maka Anda harus melakukan banyak copy paste. Untuk memformat kode Python saya juga menggunakan Pygments ( posting blog ).

— Samuel
sumber
Saya dulu menggunakan hilite.me , tapi sekarang saya lebih suka dillinger.io
— GoYun.Info
Saya juga lebih suka ini daripada gist.github. Tidak perlu javascript dan style / css tambahan. Terima kasih Pak.
— Prabowo Murti
40

Skrip css ini mungkin berguna untuk semua - Ini bukan untuk penyorotan sintaksis tetapi bekerja dengan baik untuk menyajikan kode sumber dalam format asli:

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

Cara Penggunaan :

  1. Tempel cuplikan ini di editor teks,
  2. rekatkan kode Anda di blok <<<<<< >>>>>>.
  3. Salin semua dan
  4. rekatkan ke tampilan HTML di editor pos blogger (atau lainnya).

MANFAAT: Sederhana dan mudah digunakan, kurang konfigurasi, mudah dikonfigurasi ulang, tidak ada perangkat lunak tambahan

— gtiwari333
sumber
1
Jawaban paling sederhana dan rapi menurut saya. Cukup buat CSS internal dan Anda siap melakukannya.
— Rishik Mani
bekerja dengan baik untuk saya juga. solusi sederhana
— Hasitha
15

Ini dapat dilakukan dengan cukup mudah dengan SyntaxHighlighter. Saya memiliki petunjuk langkah demi langkah untuk mengatur SyntaxHighlighter di Blogger di blog saya. SyntaxHighlighter sangat mudah digunakan. Ini memungkinkan Anda memposting cuplikan dalam bentuk mentah dan kemudian membungkusnya dalam preblok seperti:

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

Cukup ganti nama kuas ke "python" atau "java" atau "javascript" dan rekatkan kode pilihan Anda. Penandaan CDATA memungkinkan Anda memasukkan cukup banyak kode apa pun di sana tanpa khawatir entitas akan lolos atau gangguan khas lainnya dari kode blog.

— Alain O'Dea
sumber
1
Instruksi Anda bekerja lebih baik untuk saya daripada jawaban terkemuka lainnya. Jika ada orang yang menemukan diri mereka mencarinya, berikut adalah daftar kuas yang dibundel dan alias mereka.
— Scott
13

1. Pertama, ambil cadangan template blogger Anda
2. Setelah itu buka template blogger Anda (Dalam mode Edit HTML) & salin semua css yang diberikan di tautan ini sebelum </b:skin>tag
3. Tempel kode followig sebelum </head>tag

<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. Tempel kode berikut sebelum </body>tag.

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

5. Simpan Template Blogger.
6. Sekarang penyorotan sintaks siap digunakan Anda dapat menggunakannya dengan <pre></pre>tag.

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

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

7. Anda dapat melarikan diri kode Anda di sini .
8. Berikut adalah daftar bahasa yang didukung untuk <class>atribut.

— Mahesh Meniya
sumber
Tautan yang bagus. Akan lebih baik jika diformat warna itu! +1
— Gaʀʀʏ
@le_garry: terima kasih saya menghadapi beberapa masalah saat memformat cuplikan kode sehingga tidak berwarna.
— Mahesh Meniya
Lihat jawabannya dengan gissolved. Stabilo terbaik yang pernah saya lihat sejauh ini, dan warnanya.
— Gaʀʀʏ
@le_garry Ohh Anda mengambil tentang menyoroti sintaks di Blogger Ini berfungsi baik dengan warna. Saya salah paham bahwa Anda mengambil jawaban saya Jadi, saya sedih bahwa saya telah menghadapi beberapa masalah ..
— Mahesh Meniya
@ MaheshMeniya saya mengikuti semua langkah yang Anda tulis untuk sintaksis sintaksis tetapi tidak berfungsi, apakah ada tambahan berpikir apa yang saya hilang?
— AA.SC
5

Saya menggunakan solusi teknologi yang cukup rendah. Saya memformat kode menggunakan alat penyorotan sintaks online ini kemudian hanya menempelkannya ke blog

— Phil Hale
sumber
Yup - tohtml adalah solusi yang direkomendasikan oleh TechNet Wiki untuk menempelkan kode!
— rbrayb
@ Phil Hale Tidak ada lekukan di alat itu
— user2771655
Ini adalah solusi terbaik yang saya temukan sampai sekarang. Terima kasih
— Kinjal
5

Inilah salah satu situs yang akan memformat kode Anda dan meludahkan html, dan bahkan menyertakan gaya inline untuk pewarnaan sintaks. Mungkin tidak bekerja untuk semua kebutuhan Anda, tetapi merupakan awal yang baik. Saya percaya dia telah membuat sumber tersedia jika Anda ingin memperpanjangnya:

— Kaya
sumber
Tidak berfungsi lagi.
— Ε Г И І И О
4

Saya telah membuat alat yang menyelesaikan pekerjaan. Anda dapat menemukannya di blog saya:

Colorizer C # Kode Online gratis

Selain mewarnai kode C # Anda, alat ini juga menangani semua simbol '<' dan '>' yang mengubahnya menjadi '& lt;' dan '& gt;'. Tab dikonversi menjadi spasi agar terlihat sama di peramban yang berbeda. Anda bahkan dapat membuat colorizer inline gaya CSS, jika Anda tidak bisa atau Anda tidak ingin memasukkan lembar gaya CSS di blog atau situs web Anda.

— Pavel Vladov
sumber
3

Saya menggunakan SyntaxHighlighter dengan blog Blogger saya. Situs sebenarnya di-host di server saya sendiri daripada di Blogger (Blogger memiliki opsi untuk memasang posting ke situs Anda sendiri), tetapi memiliki domain dan hosting web Anda sendiri hanya berharga beberapa dolar sebulan.

— Pete Kirkham
sumber
Setuju - ada sejumlah opsi jika saya meng-host blog saya sendiri tetapi tampaknya tidak ada banyak dukungan ketika blog tersebut sebenarnya di-host oleh Blogger.
— rbrayb
2

Sebenarnya saya telah menggunakan (apa lagi ;-)) Vim untuk ini: ia memiliki 2html "plugin". Lihat dokumen di sini .

Jadi ketika saya mengedit kode saya, saya hanya mengubahnya menjadi HTML dan menempelkan hasilnya ke editor HTML Blogger.

Catatan: HTML ini tidak begitu indah (embeded css akan lebih baik), tetapi hanya berfungsi.

Oh: dan ini memiliki file sintaks untuk beberapa bahasa yang membuatnya sangat berguna.

— Zsolt Botykai
sumber
1

Jawaban spesifik Emacs: Sejauh menyangkut blogger, ini memungkinkan inline css. Masalah dengan stabilo berbasis javascript adalah Anda harus hidup dengan skema warnanya atau mengimplementasikannya sendiri. Tapi, seperti saya, jika Anda adalah penggemar skema warna emacs Anda sendiri, Anda memiliki pilihan yang jauh lebih baik. Saya telah meretas paket "htmlize.el" untuk emacs untuk menambahkan empat fungsi berikut ...

  1. blog-htmlize-buffer
  2. blog-htmlize-region
  3. blog-htmlize-buffer-with-linum
  4. blog-htmlize-wilayah-dengan-linum

Fungsi-fungsi ini akan menampilkan copy-paste html siap (gaya inline) dalam buffer baru di emacs, yang dapat Anda langsung gunakan dalam posting blog Anda. Outputnya terlihat persis sama dengan Anda akan melihat kode di emacs (termasuk skema warna).

Berikut ini tautan ke blog saya , di mana Anda dapat menemukan informasi terperinci tentang cara menggunakan "blog-htmlize.el" dengan emacs. Ini tidak jauh dengan pengkodean html juga tanda "kurang dari" dan "lebih besar dari". Dan karena emacs melakukan semua penyorotan dan gaya, Anda tidak perlu khawatir tentang apakah perpustakaan js mendukung bahasa snippet Anda, Anda juga tidak perlu ikut campur dengan kode templat Anda di blogger.

Anda dapat menemukan file elisp di sini (simpan file sebagai blog-htmlize.el )

— Sujeet
sumber
0

Saya memutar sendiri di F # (lihat pertanyaan ini ), tetapi masih belum sempurna (saya hanya melakukan regexps, jadi saya tidak mengenali kelas atau nama metode dll).

Pada dasarnya, dari apa yang saya tahu, editor blogger kadang-kadang akan makan kurung sudut Anda jika Anda beralih antara mode Tulis dan HTML. Jadi, Anda harus menempel ke mode HTML lalu menyimpan langsung. (Saya mungkin salah dalam hal ini, baru mencoba sekarang dan tampaknya berfungsi - tergantung pada browser?)

Ini mengerikan ketika Anda memiliki obat generik!

— Benjol
sumber
0

Untuk memposting html, javascript, c # dan java Anda harus mengonversi karakter khusus ke kode HTML. sebagai '<'sebagai &lt;dan '>'untuk &gt;dan lain-lain

Tambahkan tautan ini, Konverter kode ke iGoogle. Ini akan membantu Anda mengonversi karakter khusus.

Kemudian tambahkan SyntaxHighlighter 3.0.83 versi baru untuk menyesuaikan kode Anda di blogger. Tetapi Anda harus tahu Cara mengkonfigurasi syntaxHighlighter di template blogger Anda.

— Mdhar9e
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.