Formatowanie fragmentów kodu do blogowania w Bloggerze [zamknięte]

282

Mój blog jest hostowany w Bloggerze i często publikuję fragmenty kodu w C/ C#/ Java/ XMLitp., Ale uważam, że fragment zostaje „zniekształcony”.

Czy są jakieś strony internetowe, których mógłbym użyć do wcześniejszego przeanalizowania fragmentu kodu i uporządkowania formatowania, konwersji XML „ <” na „ <” itp.

Istnieje wiele pytań w tym obszarze na temat SO, ale nie mogłem znaleźć żadnego, który odpowiedziałby bezpośrednio na to pytanie.

Edit:W przypadku odpowiedzi @Rich witryna stwierdza: „Aby wyświetlić sformatowany kod w witrynie, musisz uzyskać ten arkusz stylów CSS i dodać do niego odniesienie w <head>sekcji strony” . To jest problem - nie możesz tego zrobić w Bloggerze AFAIK.

formatting blogs blogger

— rbrayb
źródło

3

Aby wyświetlić sformatowany kod: Jeśli używasz programu Visual Studio, możesz skopiować dowolny typ kodu html / css / javascript / c # itp. Do Bloggera. Musisz zainstalować elektronarzędzia produkcyjne Visual Studio: aby uzyskać więcej informacji, przeczytaj: coding-issues.blogspot.in/2013/10/…

— Ranadheer Reddy

Wypróbuj wtyczkę Wklej jako Visual Studio Code dla Windows Live Writer dla edytora offline Blogger. WYSIWYG! .

— herohuyongtao

Czy brakuje Ci szafki na treści społecznościowe, takiej jak WordPress? teraz możesz dodać to w Bloggerze też stackoverflow.com/questions/27619171/…

— craig lerr

1

Możesz użyć tej strony, aby uzyskać kod podświetlenia kodu spinet dla różnych języków. daje html, który możesz opublikować na swoim blogu hilite.me

— Bhavikkumar 4.04.16

Możesz skopiować kod w intellij i wkleić na swoim blogu. Działa jak urok dla mnie na moim blogu - codetails.blogspot.com/2017/11/design-pattern-in-java.html

— user3871494

253

Utworzyłem wpis na blogu, który wyjaśnia, jak dodać wyróżnianie składni kodu do blogera za pomocą syntaxhighlighter 2.0

Oto mój post na blogu:

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

Mam nadzieję, że to wam pomoże .. Jestem pod wrażeniem tego, co może zrobić.

— CraftyFella
źródło

2

Czy ktoś może potwierdzić, czy to nadal działa? Próbowałem wkleić tag skryptu tuż przed </head>sekcją i dodałem tag poprzedzający do mojego kodu. Bez zmian.

— arviman

2

Spędziłem nad tym kilka godzin i w ogóle nie mogę tego zrobić.

— thepaulpage

1

Nie działa dobrze dla blogera DYNAMIC view, czy możesz podać jakąś alternatywę? oto mój blog z dynamicznym widokiem satindersinght.blogspot.in

— Satinder singh

1

Wygląda na to, że w kodzie, który należy skopiować i wkleić, brakuje czegoś na górze, a konkretnie znacznika <script>.

— John Little

1

Odpowiedź Samuela jest znacznie lepsza. Nie lubię dodawać tak wielu skryptów javascript na moim blogu tylko dla podkreślenia składni. Zwłaszcza strony, które nie mają żadnej podświetlanej składni, to przesada.

— divinedragon,

126

Najłatwiejszym sposobem udostępniania kodu jest publiczna treść. Wystarczy napisać jedną i wkleić kod do osadzenia. Bułka z masłem.

http://gist.github.com

Aby rozwiązać problem z wyszukiwarką, możesz użyć ukrytej divna stronie tak prostej jak:

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

— yodaisgreen
źródło

koleś, po użyciu go przez około 20 minut, nie mogę ci wystarczająco podziękować! Najlepsze formatowanie, bez kłopotów, cały kod jest w jednym miejscu, posty wyglądają po prostu pięknie, edycja postu jest niezwykle łatwa, ponieważ nie mieszasz kodu z resztą postu i nie martw się, że to zrobisz coś głupiego i zgubić / źle sformatować dowolny kod. Dzięki człowieku!

— Elijah Saounkine

19

Osadzanie jest javascript, istnieje duża szansa, że wyszukiwanie będzie niewidoczne. To prawie zabija to dla postów na blogu.

— James Moore

6

Obecnie używam gists, ale prawdopodobnie ponownie użyję SyntaxHighlighter. Nie tylko gisty używają JavaScript (co czyni je niedostępnymi również w czytnikach RSS), ale także spowalniają ładowanie strony, ponieważ każda gista jest pobierana sekwencyjnie blokując renderowanie. Nie jest to dobry wybór.

— Tomasz Nurkiewicz,

Dzięki! Zrobiłeś mi dzień. Po prostu podzielę się tym skryptem, aby dodać gist do blogera: github.com/moski/gist-Blogger

— daniel.sedlacek

1

Ten pomysł naprawdę działa dobrze! wynik jest po prostu chcę, że potrzebuję; ładnie sformatowany kod ... ale nie pójdę z tym. Wolę, aby mój post był kompletny sam w sobie. Posiadanie kodu, który jest częścią posta, hostowanego gdzie indziej i dołączonego przez js, po prostu go pokonuje!

— dade

63

Na moim blogu używam http://hilite.me/ do formatowania kodu źródłowego. Obsługuje wiele formatów i danych wyjściowych, a raczej czysty HTML. Ale jeśli masz wiele fragmentów kodu, musisz wykonać wiele operacji kopiowania. Do formatowania kodu Pythona użyłem również Pygments ( post na blogu ).

— Samuel
źródło

Kiedyś używałem hilite.me , ale teraz wolę dillinger.io

— GoYun.Info

Wolę to również od gist.github. Nie wymaga javascript i dodatkowego stylu / css. Dziękuję Panu.

— Prabowo Murti

40

Ten skrypt css może być przydatny dla wszystkich - nie służy do podświetlania składni, ale działa dobrze do prezentacji kodu źródłowego w oryginalnym formacie:

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

Jak używać :

Wklej ten fragment w edytorze tekstu,
wklej swój kod w bloku <<<<<< >>>>>>.
Skopiuj wszystko i
wklej do widoku HTML w edytorze postów na blogu (lub innym).

KORZYŚCI: Prosty i łatwy w użyciu, mniej konfiguracji, łatwy do rekonfiguracji, bez dodatkowego oprogramowania

— gtiwari333
źródło

1

Moim zdaniem najprostsza i najładniejsza odpowiedź. Po prostu utwórz wewnętrzny CSS i gotowe.

— Rishik Mani

działa również dobrze dla mnie. proste rozwiązanie

— Hasitha

15

Można to zrobić dość łatwo za pomocą SyntaxHighlighter. Mam instrukcje krok po kroku dotyczące konfigurowania SyntaxHighlighter w Bloggerze na moim blogu. SyntaxHighlighter jest bardzo łatwy w użyciu. Pozwala publikować fragmenty w postaci surowej, a następnie owijać je w prebloki, takie jak:

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

Po prostu zmień nazwę pędzla na „python” lub „java” lub „javascript” i wklej wybrany kod. Tagowanie CDATA pozwala ci umieścić praktycznie dowolny kod bez obawy o ucieczkę encji lub inne typowe niedogodności związane z blogowaniem kodu.

— Alain O'Dea
źródło

1

Twoje instrukcje działały dla mnie lepiej niż druga wiodąca odpowiedź. Na wypadek, gdyby ktoś ich szukał, oto lista dołączonych pędzli i ich aliasów.

— Scott,

13

1. Najpierw wykonaj kopię zapasową szablonu blogger
2. Następnie otwórz szablon blogger (w trybie edycji HTML) i skopiuj wszystkie css podane w tym linku przed </b:skin>tagiem
3. Wklej kod followig przed </head>tagiem

<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. Wklej następujący kod przed </body>tagiem.

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

5. Zapisz szablon Bloggera.
6. Teraz podświetlanie składni jest gotowe do użycia, możesz używać go z <pre></pre>tagiem.

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

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

7. Czy można uciec swój kod tutaj .
8. Oto lista obsługiwanych języków dla <class>atrybutu.

— Mahesh Meniya
źródło

Niezły link. Byłoby lepiej, gdyby to sformatowane w kolorze! +1

— Gaʀʀʏ

@le_garry: dzięki, miałem problem z formatowaniem fragmentu kodu, więc nie jest w kolorze.

— Mahesh Meniya,

Zobacz odpowiedź gissolved. Najlepszy zakreślacz, jaki do tej pory widziałem, i ma kolor.

— Gaʀʀʏ

@le_garry Ohh, bierzesz pod uwagę składnię w Bloggerze Działa to doskonale z kolorem. Nie rozumiem, że bierzesz pod uwagę moją odpowiedź. Było mi smutno, że spotkałem się z pewnymi problemami ...

— Mahesh Meniya,

@MaheshMeniya Wykonałem wszystkie kroki, które napisałeś dla syntaxhighlighter, ale to nie działa, czy jest jakaś dodatkowa myśl, czego mi brakuje?

— AA.SC

9

http://formatmysourcecode.blogspot.co.uk/ działa dobrze, wystarczy skopiować, sformatować i wkleić z powrotem.

— Gob00st
źródło

Używam tego na moim blogu. Jednak dla osób kochających kolory nie jest to kod koloru! Uwielbiam to jasne i proste.

— Aravind

5

Korzystam z dość niskiej technologii. Formatuję kod za pomocą tego internetowego narzędzia do podświetlania składni , a następnie wklejam go na blogu

— Phil Hale
źródło

Yup - tohtml to rozwiązanie zalecane przez Wiki TechNet do wklejenia kodu!

— rbrayb 19.10.11

@Phil Hale W tym narzędziu nie ma wcięcia

— 2771655

To najlepsze rozwiązanie, jakie znalazłem do tej pory. Dziękuję

— Kinjal,

5

Oto jedna strona , która sformatuje kod i wypluje html, a nawet zawiera wbudowane style do kolorowania składni. Może nie działać na wszystkie Twoje potrzeby, ale to dobry początek. Wierzę, że udostępnił źródło, jeśli chcesz je rozszerzyć:

— Bogaty
źródło

Już nie działa.

— Г Г И І И О

4

Stworzyłem narzędzie, które wykonuje zadanie. Możesz go znaleźć na moim blogu:

Darmowy internetowy C # Code Colorizer

Oprócz pokolorowania kodu C #, narzędzie zajmuje się również wszystkimi symbolami „<” i „>” konwertując je na „& lt;” i „& gt;”. Tabulatory są konwertowane na spacje, aby wyglądały tak samo w różnych przeglądarkach. Możesz nawet ustawić kolorizer w linii stylów CSS, jeśli nie możesz lub nie chcesz wstawiać arkusza stylów CSS na swoim blogu lub stronie internetowej.

— Pavel Vladov
źródło

3

Używam SyntaxHighlighter z moim blogiem zasilanym Bloggerem. Rzeczywista witryna jest hostowana na moim własnym serwerze, a nie Bloggera (Blogger ma opcję wysyłania postów na własną stronę), ale posiadanie własnej domeny i hostingu kosztuje tylko kilka dolarów miesięcznie.

— Pete Kirkham
źródło

Zgoda - istnieje wiele opcji, jeśli prowadzę własnego bloga, ale wydaje się, że nie ma dużego wsparcia, gdy blog jest faktycznie hostowany przez Bloggera.

— rbrayb

3

Wygląda na to, że wprowadzono pewne zmiany w SyntaxHighlighter 2.0, które ułatwiają korzystanie z Bloggera.

Dostępne są wersje stylów i skryptów JavaScript na stronie : http://alexgorbatchev.com/pub/sh/

— Daniel Ballinger
źródło

2

Właściwie użyłem (co jeszcze ;-)) Vima do tego: ma 2-wtyczkową „wtyczkę”. Zobacz dokumenty tutaj .

Podczas edycji kodu po prostu konwertuję go na HTML i wklejam wyniki do edytora HTML Bloggera.

Uwaga: nie jest tak piękny HTML (lepiej byłoby osadzony css), ale po prostu działa.

Och: i ma pliki składniowe dla kilku języków, co czyni go bardzo przydatnym.

— Zsolt Botykai
źródło

1

Konkretna odpowiedź Emacsa: W przypadku blogera pozwala on wbudować css. Problem z zakreślaczami opartymi na javascript polega na tym, że musisz żyć według ich schematu kolorów lub zastosować własny. Ale podobnie jak ja, jeśli jesteś fanem własnego schematu kolorów emacs, masz znacznie lepszą dostępną opcję. Zhakowałem pakiet „htmlize.el” dla emacsa, aby dodać następujące cztery funkcje ...

blog-htmlize-buffer
blog-htmlize-region
blog-htmlize-buffer-with-linum
blog-htmlize-region-with-linum

Te funkcje wygenerują gotowy do kopiowania i wklejania HTML (w stylu wbudowanym) w nowym buforze w emacsie, którego można bezpośrednio używać w swoim blogu. Dane wyjściowe wyglądają dokładnie tak samo, jak kod w emacsie (w tym schemat kolorów).

Oto link do mojego bloga , gdzie można znaleźć szczegółowe informacje o tym, jak używać „blog-htmlize.el” z emacsem. Eliminuje to także kodowanie HTML znaków „mniej niż” i „więcej niż”. A ponieważ emacs wykonuje wszystkie wyróżnienia i stylizację, nie musisz się martwić, czy biblioteka js obsługuje język twoich fragmentów, ani nie musisz wtrącać się w kod szablonu w bloggerze.

Możesz znaleźć plik elisp tutaj (zapisz plik jako blog-htmlize.el )

— Sujeet
źródło

0

Zwróciłem swój własny w F # (patrz to pytanie), ale wciąż nie jest idealny (po prostu wypisuję wyrażenia regularne, więc nie rozpoznaję nazw klas ani metod itp.).

Zasadniczo, z tego, co mogę powiedzieć, edytor blogerów czasami zje nawiasy kątowe, jeśli przełączysz się między trybem tworzenia a HTML. Więc musisz wkleić do trybu HTML, a następnie zapisać bezpośrednio. (Mogę się mylić, właśnie wypróbowałem teraz i wydaje się, że działa - zależy od przeglądarki?)

To okropne, gdy masz leki generyczne!

— Benjol
źródło

0

Aby opublikować HTML, JavaScript, C # i Java, należy przekonwertować znaki specjalne na kod HTML. tak '<'jak <i '>'do >itp

Dodaj ten link Code Converter do iGoogle. Pomoże to w konwersji znaków specjalnych.

Następnie dodaj nową wersję SyntaxHighlighter 3.0.83, aby dostosować swój kod w bloggerze . Ale powinieneś wiedzieć, jak skonfigurować składnię wyróżnienia w szablonie blogera.

— Mdhar9e
źródło