Định dạng đoạn mã để viết blog trên Blogger [đã đóng]

282

Blog của tôi được lưu trữ trên Blogger và tôi thường xuyên đăng đoạn mã trong C/ C#/ Java/ XMLv.v. nhưng tôi thấy đoạn mã bị "xáo trộn".

Có bất kỳ trang web nào tôi có thể sử dụng để phân tích đoạn mã trước đó và sắp xếp định dạng, chuyển đổi XML " <" thành " <", v.v.

Có một số câu hỏi xung quanh khu vực này trên SO nhưng tôi không thể tìm thấy bất kỳ câu hỏi nào giải quyết trực tiếp câu hỏi này.

Edit:Đối với câu trả lời @Rich , trang web nói "Để hiển thị mã được định dạng trên trang web của bạn, bạn cần lấy biểu định kiểu CSS này và thêm một tham chiếu đến nó trong <head>phần của trang của bạn" . Đó là vấn đề - bạn không thể làm điều này trên Blogger AFAIK.

formatting blogs blogger

— rbrayb
nguồn

3

Để hiển thị mã được định dạng: Nếu bạn đang sử dụng visual studio, thì bạn có thể sao chép bất kỳ loại mã html / css / javascript / c # vv nào sang blogger. Bạn phải cài đặt các công cụ sức mạnh năng suất của studio trực quan: để biết thêm thông tin, hãy đọc: mã hóa

— Ranadheer Reddy

Hãy thử trình cắm Dán dưới dạng Visual Studio Code cho Windows Live Writer cho trình chỉnh sửa ngoại tuyến Blogger. WYSIWYG! .

— herohuyongtao

Bạn đang thiếu khóa nội dung xã hội như WordPress? bây giờ bạn có thể thêm cái này vào blogger nữa stackoverflow.com/questions/27619171/ cấp

— craig lerr

1

Bạn có thể sử dụng trang web này để lấy mã tô sáng mã spinet cho các ngôn ngữ khác nhau. nó cung cấp cho bạn html, bạn có thể đăng nó trong blog của mình hilite.me

— Bhastakumar

Bạn có thể sao chép mã trong intellij và dán vào blog của bạn. Nó hoạt động như một cơ duyên đối với tôi trong blog của mình - codetails.blogspot.com/2017/11/design-potype-in-java.html

— user3871494

253

Tôi đã tạo một blog entry bài này giải thích làm thế nào để thêm mã cú pháp tô màu để blogger sử dụng SyntaxHighlighter 2.0

Đây là bài viết trên blog của tôi:

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

Tôi hy vọng nó sẽ giúp các bạn .. Tôi khá ấn tượng với những gì nó có thể làm.

— CraftyFella
nguồn

2

Bất cứ ai có thể xác nhận nếu điều này vẫn còn hoạt động? Tôi đã thử dán thẻ script ngay trước </head>phần và thêm thẻ pre xung quanh mã của tôi. Không có thay đổi mặc dù.

— arviman

2

Tôi đã dành một vài giờ cho nó và tôi không thể làm việc này được.

— thepaulpage 21/03/13

1

Nó không hoạt động tốt cho blogger xem NĂNG ĐỘNG, bạn có thể cung cấp bất kỳ thay thế? Đây là blog của tôi với chế độ xem động satinderinght.blogspot.in

— Satinder singh

1

Có vẻ như mã bạn phải sao chép và dán bị thiếu thứ gì đó ở trên cùng, cụ thể là thẻ <script>.

— John Little

1

Câu trả lời của Samuel tốt hơn nhiều. Tôi không thích thêm quá nhiều javascripts trên blog của mình chỉ để làm nổi bật cú pháp. Đặc biệt là các trang không có bất kỳ cú pháp nào được chiếu sáng là quá mức cần thiết.

— divinedragon 17/03/2017

126

Cách dễ nhất để chia sẻ mã là với một ý chính. Chỉ cần viết một lên và dán vào mã nhúng. Dễ như ăn bánh.

http://gist.github.com

Để giải quyết vấn đề của công cụ tìm kiếm, người ta có thể sử dụng ẩn divtrên trang đơn giản như:

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

— yodaisreen
nguồn

anh bạn, sau khi sử dụng nó trong 20 phút, tôi không thể cảm ơn đủ! Định dạng tốt nhất, không ồn ào, tất cả các mã đều ở một nơi, các bài đăng trông rất đẹp, việc chỉnh sửa bài đăng cực kỳ dễ dàng khi bạn không trộn lẫn mã với phần còn lại của bài đăng và không bao giờ lo lắng rằng bạn làm một cái gì đó ngu ngốc và mất / định dạng sai bất kỳ mã nào. Người đàn ông Thanx!

— Elijah Saounkine

19

Nhúng là javascript, rất có thể nó vô hình để tìm kiếm. Điều đó khá nhiều giết chết nó cho bài viết blog.

— James Moore

6

Tôi hiện đang sử dụng ý chính nhưng có lẽ tôi sẽ sử dụng SyntaxHighlighter một lần nữa. Không chỉ các ý chính sử dụng JavaScript (điều này cũng khiến chúng không thể truy cập được trong trình đọc RSS) mà còn làm chậm quá trình tải trang vì mọi ý chính đều được tải xuống liên tục chặn kết xuất. Không phải là một lựa chọn tốt.

— Tomasz Nurkiewicz

Cảm ơn! Bạn làm cho ngày của tôi. Tôi sẽ chỉ chia sẻ tập lệnh này để thêm ý chính vào blogger: github.com/moski/gist-Blogger

— daniel.sedlacek

1

Ý tưởng này thực sự hoạt động tốt! kết quả chỉ là tôi muốn; mã được định dạng độc đáo ... nhưng tôi sẽ không đi với nó. Tôi muốn có bài viết của tôi được hoàn thành trong và ngoài chính nó. Có mã, là một phần của bài đăng, được lưu trữ ở nơi khác và được bao gồm thông qua js, chỉ cần đánh bại điều đó!

— dade

63

Đối với blog của tôi, tôi sử dụng http://hilite.me/ để định dạng mã nguồn. Nó hỗ trợ rất nhiều định dạng và đầu ra khá sạch html. Nhưng nếu bạn có nhiều đoạn mã thì bạn phải thực hiện nhiều thao tác sao chép. Để định dạng mã Python tôi cũng đã sử dụng Pygments ( bài đăng trên blog ).

— Samuel
nguồn

Tôi đã từng sử dụng hilite.me , nhưng bây giờ tôi thích dillinger.io

— GoYun.Info 19/03/2015

Tôi cũng thích điều này hơn gist.github. Không có javascript và phong cách / css bổ sung cần thiết. Cảm ơn ngài.

— Mitchowo Murti

40

Tập lệnh css này có thể hữu ích cho tất cả - Nó không phải để làm nổi bật cú pháp nhưng hoạt động tốt để trình bày mã nguồn ở định dạng ban đầu:

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

Cách sử dụng:

Dán đoạn mã này trong trình soạn thảo văn bản,
dán mã của bạn vào khối <<<<<< >>>>>>.
Sao chép tất cả và
dán vào chế độ xem HTML trong trình chỉnh sửa bài viết của blogger (hoặc bất kỳ) nào khác.

LỢI ÍCH: Đơn giản và dễ sử dụng, ít cấu hình, dễ cấu hình lại, không cần phần mềm bổ sung

— gtiwari333
nguồn

1

Câu trả lời đơn giản và gọn gàng nhất theo ý kiến của tôi. Chỉ cần tạo một CSS nội bộ và bạn sẽ ổn.

— Rishik Mani

làm việc tốt cho tôi là tốt. giải pháp đơn giản

— Hasitha

15

Điều này có thể được thực hiện khá dễ dàng với SyntaxHighlighter. Tôi có hướng dẫn từng bước để thiết lập SyntaxHighlighter trong Blogger trên blog của mình. SyntaxHighlighter rất dễ sử dụng. Nó cho phép bạn đăng đoạn trích ở dạng thô và sau đó bọc chúng thành precác khối như:

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

Chỉ cần thay đổi tên bàn chải thành "python" hoặc "java" hoặc "javascript" và dán mã bạn chọn. Việc gắn thẻ CDATA cho phép bạn đặt khá nhiều mã vào đó mà không phải lo lắng về việc thoát thực thể hoặc các phiền toái điển hình khác của việc viết mã.

— Alain O'Dea
nguồn

1

Hướng dẫn của bạn làm việc tốt hơn cho tôi so với câu trả lời hàng đầu khác. Trong trường hợp bất cứ ai thấy mình đang tìm kiếm chúng, đây là danh sách các bàn chải đi kèm và bí danh của họ.

— Scott

13

1. Trước tiên, hãy sao lưu mẫu blogger của bạn
2. Sau đó, mở mẫu blogger của bạn (Trong chế độ Chỉnh sửa HTML) & sao chép tất cả các css được cung cấp trong liên kết này trước </b:skin>thẻ
3. Dán mã theo dõi trước </head>thẻ

<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. Dán mã sau đây trước </body>thẻ.

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

5. Lưu mẫu Blogger.
6. Bây giờ đánh dấu cú pháp đã sẵn sàng để sử dụng, bạn có thể sử dụng nó với <pre></pre>thẻ.

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

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

7. Bạn có thể Thoát mã của bạn ở đây .
8. Đây là danh sách các ngôn ngữ được hỗ trợ cho <class>thuộc tính.

— Mahesh Meniya
nguồn

Một liên kết tốt đẹp. Sẽ tốt hơn nếu nó định dạng màu nó! +1

— Gaʀʀʏ

@le_garry: cảm ơn tôi đã gặp phải một số vấn đề trong khi định dạng đoạn mã để nó không có màu.

— Mahesh Meniya

Xem câu trả lời của gissolve. Công cụ tô sáng tốt nhất mà tôi đã thấy cho đến nay, và nó có màu.

— Gaʀʀʏ

@le_garry Ohh bạn đang sử dụng cú pháp tô sáng trong Blogger Nó hoạt động rất tốt với màu sắc. Tôi hiểu nhầm rằng bạn đang lấy câu trả lời của tôi Vì vậy, tôi đã buồn vì tôi đã phải đối mặt với một số vấn đề ..

— Mahesh Meniya

@MaheshMeniya tôi đã làm theo tất cả các bước bạn đã viết cho cú pháp cú pháp cú pháp nhưng nó không hoạt động, có thêm suy nghĩ gì tôi đang thiếu không?

— AA.SC

9

http://formatmysourcecode.blogspot.co.uk/ hoạt động tốt, bạn chỉ cần sao chép, định dạng, dán lại.

— Yêu tinh
nguồn

Tôi sử dụng điều này cho blog của tôi. Đối với những người yêu thích màu sắc, đây không phải là mã màu! Tôi yêu nó đơn giản và đơn giản.

— Aravind

5

Tôi sử dụng một giải pháp công nghệ khá thấp. Tôi định dạng mã bằng công cụ tô sáng cú pháp trực tuyến này sau đó chỉ cần dán mã vào blog

— Phil Hale
nguồn

Yup - tohtml là giải pháp được TechNet Wiki giới thiệu để dán mã!

— rbrayb

@Phil Hale Không có sự thụt lề trong công cụ đó

— user2771655

Đây là giải pháp tốt nhất tôi tìm thấy cho đến bây giờ. Cảm ơn bạn

— Kinjal

5

Đây là một trang web sẽ định dạng mã của bạn và nhổ ra html, và nó thậm chí còn bao gồm các kiểu nội tuyến để tô màu cú pháp. Có thể không làm việc cho tất cả các nhu cầu của bạn, nhưng là một khởi đầu tốt. Tôi tin rằng anh ấy đã cung cấp nguồn nếu bạn muốn mở rộng nó:

— Giàu có
nguồn

Không hoạt động nữa.

— Ε é И

4

Tôi đã tạo ra một công cụ hoàn thành công việc. Bạn có thể tìm thấy nó trên blog của tôi:

Công cụ tô màu mã C # trực tuyến miễn phí

Bên cạnh việc tô màu mã C # của bạn, công cụ cũng chăm sóc tất cả các biểu tượng '<' và '>' hội tụ chúng thành '& lt;' và '& gt;'. Các tab được chuyển đổi thành khoảng trắng để trông giống nhau trong các trình duyệt khác nhau. Bạn thậm chí có thể đặt bộ tô màu theo kiểu CSS, trong trường hợp bạn không thể hoặc bạn không muốn chèn một biểu định kiểu CSS vào blog hoặc trang web của bạn.

— Pavel Vladov
nguồn

3

Tôi sử dụng SyntaxHighlighter với blog do Blogger cung cấp. Trang web thực tế được lưu trữ trên máy chủ của riêng tôi chứ không phải Blogger (Blogger có tùy chọn chuyển bài viết đến trang web của riêng bạn), nhưng có tên miền và lưu trữ web của riêng bạn chỉ tốn một vài đô la mỗi tháng.

— Pete Kirkham
nguồn

Đồng ý - có một số tùy chọn nếu tôi lưu trữ blog của riêng mình nhưng dường như không có nhiều hỗ trợ khi blog thực sự được lưu trữ bởi Blogger.

— rbrayb

3

Có vẻ như đã có một số thay đổi với SyntaxHighlighter 2.0 giúp sử dụng dễ dàng hơn với Blogger.

Có các phiên bản được lưu trữ của các kiểu và Javascripts tại: http://alexgorbatchev.com/pub/sh/

— Daniel Ballinger
nguồn

2

Trên thực tế tôi đã sử dụng (những gì khác ;-)) Vim cho điều này: nó có một "plugin" 2html. Xem các tài liệu ở đây .

Vì vậy, khi tôi chỉnh sửa mã của mình, tôi chỉ cần chuyển đổi nó thành HTML và dán kết quả vào trình soạn thảo HTML của Blogger.

Lưu ý: HTML không đẹp lắm (nhúng css sẽ tốt hơn), nhưng nó chỉ hoạt động.

Ồ: và nó có các tệp cú pháp cho một số ngôn ngữ khiến nó khá hữu ích.

— Thực vật Zsolt
nguồn

1

Câu trả lời cụ thể của Emacs: Theo như blogger có liên quan, nó cho phép css nội tuyến. Vấn đề với các công cụ tô sáng dựa trên javascript là bạn phải sống với bảng màu của chúng hoặc thực hiện theo cách riêng của bạn. Nhưng, giống như tôi, nếu bạn là một fan hâm mộ của bảng màu emacs của riêng bạn, bạn có sẵn một lựa chọn tốt hơn nhiều. Tôi đã hack gói "htmlize.el" cho emacs để thêm bốn chức năng sau ...

blog-htmlize-đệm
blog-htmlize-khu vực
blog-htmlize-đệm-với-linum
blog-htmlize-khu vực-với-linum

Các hàm này sẽ xuất bản sao chép sẵn sàng dán html (theo kiểu nội tuyến) trong một bộ đệm mới trong emacs, mà bạn có thể sử dụng trực tiếp trong bài đăng trên blog của mình. Đầu ra trông giống hệt như bạn sẽ thấy mã trong emacs (bao gồm cả bảng màu).

Đây là một liên kết đến blog của tôi , nơi bạn có thể tìm thấy thông tin chi tiết về cách sử dụng "blog-htmlize.el" với emacs. Điều này cũng không mã hóa html với các dấu hiệu "nhỏ hơn" và "lớn hơn". Và vì emacs đang làm nổi bật và tạo kiểu, bạn không phải lo lắng về việc thư viện js có hỗ trợ ngôn ngữ của đoạn trích của bạn hay không, bạn cũng không phải can thiệp vào mã mẫu của mình trong blogger.

Bạn có thể tìm thấy tệp elisp tại đây (lưu tệp dưới dạng blog-htmlize.el )

— Sujeet
nguồn

0

Tôi đã tự lăn trong F # (xem câu hỏi này ), nhưng nó vẫn không hoàn hảo (tôi chỉ thực hiện regexps, vì vậy tôi không nhận ra các lớp hoặc tên phương thức, v.v.).

Về cơ bản, từ những gì tôi có thể nói, trình soạn thảo blogger đôi khi sẽ ăn các dấu ngoặc góc của bạn nếu bạn chuyển đổi giữa chế độ Soạn và HTML. Vì vậy, bạn phải dán vào chế độ HTML sau đó lưu trực tiếp. (Tôi có thể sai về điều này, vừa mới thử và có vẻ như nó hoạt động - phụ thuộc vào trình duyệt?)

Thật kinh khủng khi bạn có thuốc generic!

— Carlo
nguồn

0

Để đăng html, javascript, c # và java của bạn, bạn nên chuyển đổi các ký tự đặc biệt thành mã HTML. như '<'như <và '>'để >và vv

Thêm liên kết này Trình chuyển đổi mã vào iGoogle. Điều này sẽ giúp bạn chuyển đổi các ký tự đặc biệt.

Sau đó thêm SyntaxHighlighter 3.0.83 phiên bản mới để tùy chỉnh mã của bạn trong blogger. Nhưng bạn nên biết Làm thế nào để cấu hình cú phápHighlighter trong mẫu blogger của bạn.

— Mdhar9e
nguồn