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

Najprostszym sposobem udostępniania kodu jest publiczny gist. Po prostu napisz jeden i wklej w kod osadzania. Bułka z masłem.

Http://gist.github.com

Aby rozwiązać problem z wyszukiwarką, można użyć ukrytego div na stronie w prosty sposób:

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

Na moim blogu używam http://hilite.me / sformatować kod źródłowy. Obsługuje wiele formatów i wyprowadza raczej czysty html. Ale jeśli masz dużo fragmentów kodu, musisz zrobić dużo kopiuj wklej. Do formatowania kodu Pythona użyłem również pigmentów ( blog post ).

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

1. wklej ten fragment w edytorze tekstu,
2. wklej swój kod w >>>>> blok.
3. Kopiuj wszystkie i
4. wklej do widoku HTML w Bloggerze (lub innym) edytorze postów.

Zalety: prosty i łatwy w użyciu, mniej konfiguracji, łatwy do rekonfigurowania, bez dodatkowych oprogramowanie

Można to zrobić dość łatwo za pomocą SyntaxHighlighter. Mam instrukcje krok po kroku jak skonfigurować SyntaxHighlighter w Blogger na moim blogu. SyntaxHighlighter jest bardzo łatwy w użyciu. Pozwala on umieszczać fragmenty w postaci surowej, a następnie owijać je w pre bloki typu:

<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 umieścić tam prawie każdy kod bez martwienia się o encje ucieczka lub inne typowe problemy związane z blogowaniem kodu.

1. najpierw zrób kopię zapasową szablonu Bloggera
2. Następnie otwórz szablon Bloggera (w trybie edycji HTML) i skopiuj wszystkie css podane w tym linku przed tagiem </b:skin>
3. wklej następujący kod przed znacznikiem </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. wklej poniższy kod przed znacznikiem </body>.

<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 go używać z <pre></pre> tag.

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

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

7. możesz uciec od kodu tutaj .
8. tutaj znajduje się lista obsługiwanych języków dla <class> atrybut.

Http://formatmysourcecode.blogspot.co.uk/ działa dobrze, po prostu kopiujesz, formatujesz, wklejasz.

Oto Jedna strona , która sformatuje Twój kod i wypluwa html, a nawet zawiera style wbudowane do kolorowania składni. Może nie działać dla wszystkich Twoich potrzeb, ale to dobry początek. Wydaje mi się, że udostępnił źródło, jeśli chcesz je rozszerzyć:

Używam SyntaxHighlighter z moim Blogger powered blog. Rzeczywista strona jest hostowana na moim własnym serwerze, a nie Bloggerze (Blogger ma możliwość umieszczania postów na własnej stronie), ale posiadanie własnej domeny i hostingu kosztuje tylko kilka dolarów miesięcznie.

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

Istnieją hostowane wersje stylów i Javascriptów pod adresem: http://alexgorbatchev.com/pub/sh/

Używam dość niskiej technologii rozwiązania. Formatuję kod za pomocą tego narzędzia online podświetlanie składni , a następnie wklejam go na blogu

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

Free Online C# Code Colorizer

Oprócz kolorowania kodu w C#, narzędzie zajmuje się również wszystkimi symbolami ' 'konwertującymi je do'

Faktycznie użyłem (co jeszcze ;-) ) Vim do tego: ma 2html "plugin". Zobacz dokumenty tutaj.

Więc jak edytuję mój kod, po prostu konwertuję go do HTML i wklejam wyniki do edytora HTML Bloggera.

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

Oh: I ma Pliki składni dla kilku języków, co czyni go bardzo przydatnym.

ODPOWIEDŹ specyficzna dla Emacsa: jeśli chodzi o Bloggera, pozwala on na wbudowany css. Problem z zakreślaczami javascript polega na tym, że musisz żyć z ich schematem kolorów lub zaimplementować własny. Ale, tak jak ja, jeśli jesteś fanem własnego schematu kolorów Emacsa, masz znacznie lepszą opcję dostępną. Zhakowałem " htmlize.el " pakiet dla Emacsa, aby dodać następujące cztery funkcje...

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

Te funkcje wyświetlą gotowy do kopiowania i wklejania html (w stylu inline) w nowym buforze w Emacsie, którego możesz użyć bezpośrednio w swoim poście na blogu. Wyjście wygląda 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 jak korzystać z " blog-htmlize.el " z emacsem. To eliminuje kodowanie html znaków" mniej niż "i" więcej niż " również. A ponieważ emacs zajmuje się podświetlaniem i stylizacją, nie musisz się martwić o to, czy biblioteka js obsługuje język Twoich urywków, ani nie musisz mieszać się w kod szablonu w Bloggerze.

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

Wrzucam swoje własne W F# (Patrz to pytanie), ale nadal nie jest idealne (robię tylko wyrażenia regularne, więc nie rozpoznaję klas, nazw metod itp.).

Zasadniczo, z tego co mogę powiedzieć, edytor Bloggera czasami zjada Twoje nawiasy kątowe, jeśli przełączysz się między trybem Compose i HTML. Więc musisz wkleić w tryb HTML, a następnie zapisać bezpośrednio. (Mogę się mylić w tym, po prostu próbowałem teraz i wydaje się działać-zależy od przeglądarki?)

To straszne, kiedy masz leki generyczne!

Aby opublikować swój html, javascript, c# i java należy przekonwertować znaki specjalne na kod HTML. as '<' as < and '>' to > and e.t.c..

Dodaj ten link konwerter kodu do iGoogle. Pomoże Ci to przekonwertować znaki specjalne.

Następnie dodaj SyntaxHighlighter 3.0.83 nową wersję, aby dostosować kod w Bloggerze. Ale powinieneś wiedzieć, jak skonfigurować syntaxHighlighter w szablonie Bloggera.