Formatação de excertos de código para blogar no Blogger [fechado]

O meu blog está hospedado no Blogger e eu publico frequentemente excertos de código em C / C# / Java / XML etc. mas acho que o excerto fica "mutilado".

existem alguns sites que eu poderia usar para analisar o excerto de antemão e ordenar a formatação, converter XML "< "para" &lt; " etc.

Há uma série de perguntas nesta área, mas não encontrei nenhuma que abordasse esta questão directamente.

Edit: para @Rich resposta, estados do site "para mostrar o código formatado no seu site, precisa de obter esta folha de estilo CSS, e adicionar uma referência a ela na secção <head> da sua página". Esse é o problema - você não pode fazer isso no Blogger AFAIK.

Author: Community, 2009-03-24

16 answers

Criei um item de post no blog que explica como adicionar realce de sintaxe de código ao blogger usando o syntaxhighlighter 2.0

Aqui está o meu post no blog:

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

Espero que vos ajude.. Estou impressionado com o que pode fazer.
 245
Author: CraftyFella, 2017-09-20 13:45:29

A maneira mais fácil de compartilhar o código é com um gist público. Basta escrever um e colar no código de embutimento. Fácil.

Http://gist.github.com

Para resolver o problema do motor de busca, pode-se usar o hidden div na página tão simples como:

<div style="display:none"> content </div>
 113
Author: yodaisgreen, 2015-08-05 16:23:01

Para o meu blog eu uso http://hilite.me/ para formatar o código-fonte. Ele suporta muitos formatos e Saídas bastante limpo html. Mas se você tem muitos excertos de código, então você tem que fazer um monte de pasta de cópia. Para a formatação do código Python também usei pigmentos (blog post ).

 54
Author: Samuel, 2012-01-25 19:45:18

Este script css pode ser útil para todos - não é para realce de sintaxe, mas funciona bem para apresentar o código-fonte no formato original:

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

Como utilizar :

  1. colar este excerto no editor de texto,
  2. cole o seu código em >>>>> block.
  3. copiar tudo e
  4. colar à vista HTML no editor de post do blogger(ou em qualquer outro).

Benefícios: simples e fácil de usar, menos configuração, fácil de reconfigurar, sem software extra

 32
Author: gtiwari333, 2012-01-02 04:33:13
Isto pode ser feito com bastante facilidade com SyntaxHighlighter. Eu tenho instruções passo a passo para configurar SyntaxHighlighter no Blog. SyntaxHighlighter é muito fácil de usar. Permite-lhe publicar excertos em bruto e depois enrolá-los em blocos como:
<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>

Basta mudar o nome do pincel para "python" ou "java" ou "javascript" e colar no código da sua escolha. A etiqueta do CDATA. vamos colocar qualquer código sem nos preocuparmos. entidade escapando ou outros aborrecimentos típicos de blogs de código.

 15
Author: Alain O'Dea, 2015-11-17 17:23:01

1.Primeiro, faça uma cópia de segurança do seu modelo de blogger.
2. Depois disso, abra o seu modelo de 'blogger' (no modo de editar HTML) e copie todos os css dados nesta ligação antes da marca </b:skin>
3. colar o código seguinte antes de </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. colar o seguinte código antes da etiqueta </body>.

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

5. Gravar Modelo De Blogger.
6. Agora o realce de sintaxe está pronto para usar, você pode usá-lo com <pre></pre> tag.

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

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

7.Podes escapar ao teu código aqui.
8. aqui está a lista da língua suportada para <class> atributo.

 12
Author: Mahesh Meniya, 2012-06-01 12:01:24

Http://formatmysourcecode.blogspot.co.uk/ funciona bem, basta copiar, formatar, colar para trás.

 6
Author: Gob00st, 2012-05-09 17:58:24

Aqui está um site que irá formatar o seu código e cuspir html, e ele até inclui estilos inline para coloração de sintaxe. Pode não funcionar para todas as tuas necessidades, mas é um bom começo. Creio que ele disponibilizou a fonte se quiser estendê-la.

 6
Author: Rich, 2013-01-29 23:34:28

Eu uso SyntaxHighlighter com o meu blog powered blog. O site real é hospedado em meu próprio servidor, em vez de Blogger's though (Blogger tem uma opção de posts ftping para o seu próprio site), mas ter o seu próprio domínio e hospedagem web custa apenas um par de dólares por mês.

 3
Author: Pete Kirkham, 2009-03-24 21:11:07

Parece que houve algumas mudanças com SyntaxHighlighter 2.0 que tornam mais fácil de usar com o Blogger.

Existem versões hospedadas dos estilos e Javascripts em: http://alexgorbatchev.com/pub/sh/

 3
Author: Daniel Ballinger, 2009-11-10 23:08:46
Uso uma solução de baixa tecnologia. Formatei o código usando esta ferramenta de realce de sintaxe 'online' e depois colei - a no blog
 3
Author: Phil Hale, 2011-07-02 21:16:13
Criei uma ferramenta que faz o trabalho. Você pode encontrá-lo no meu blog:

Coloridor De Código C# Online Gratuito

Além de colorir o seu código C#, a ferramenta também cuida de todos os símbolos '' que os convertem para '

 3
Author: Pavel Vladov, 2013-03-15 11:07:45

Na verdade eu tinha usado (o que mais ;-) ) Vim para isso: ele tem um "plugin"de 2html. Veja os documentos aqui.

Assim que eu edito o meu código, eu apenas o converto para HTML e colo os resultados para o editor de HTML do blogueiro.

Nota: não é tão bonito HTML (CSS embedido seria melhor), mas apenas funciona.

OH: e tem Ficheiros de sintaxe para várias línguas o que o torna bastante útil.

 2
Author: Zsolt Botykai, 2009-03-24 21:00:46

Resposta específica do Emacs: no que diz respeito ao blogueiro, ele permite o css inline. O problema com marcadores baseados em javascript é que você tem que viver com o seu esquema de cores ou implementar o seu próprio. Mas, como eu, se você é um fã de seu próprio esquema de cores emacs, você tem uma opção muito melhor disponível. Cortei o "htmlize".pacote el" para o emacs para adicionar os seguintes quatro funcao...

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

Estas funções irão produzir copy-paste ready html (inline styled) num novo buffer Emacs, que poderá usar directamente no seu post no blog. A saída é exatamente a mesma que você veria o código Emacs (incluindo o esquema de cores).

Aqui está um link para o meu blog , onde você pode encontrar detalhes informações sobre como usar o "blog-htmlize.el " com o emacs. Isto elimina também a codificação html dos sinais" menos que" e "maior que". E como o emacs está fazendo todo o realce e estilo, você não tem que se preocupar se a biblioteca js suporta a linguagem de seus trechos, nem você tem que se intrometer com seu código modelo em blogger.

Pode encontrar o ficheiro elisp aqui (guarde o ficheiro como blog-htmlize.el)

 1
Author: Sujeet, 2011-06-26 07:32:46

Eu enrolei o meu próprio Em F# (veja Esta questão), mas ainda não é perfeito (eu só faço regexps, então eu não reconheço classes ou nomes de métodos, etc.).

Basicamente, pelo que posso dizer, o editor do blogger às vezes comerá os seus parêntesis de ângulo se mudar entre o modo de composição e HTML. Então você tem que colar no modo HTML e então gravar diretamente. (I may be wrong on this, just tried now and it seems to work-browser dependent?)

É horrível quando se tem genéricos!
 0
Author: Benjol, 2017-05-23 12:18:24

Para publicar o seu html,javascript, c# e java, deverá converter caracteres especiais para código HTML. como '<' &lt; e '>' a &gt; e E. T. C..

Adicione esta ligação ao iGoogle. Isto irá ajudá-lo a converter os personagens especiais.

Depois adicioneSyntaxHighlighter 3.0.83 nova versão para personalizar o seu código no blogger. Mas você deve saber como configurar o syntaxHighlighter em seu modelo de blogger.

 0
Author: Mdhar9e, 2012-06-26 09:13:05