Formatar snippets de código para blogs no Blogger [fechado]

282

Meu blog está hospedado no Blogger e costumo postar trechos de código em C/ C#/ Java/ XMLetc., mas acho que o trecho é "confundido".

Existem sites que eu possa usar para analisar o snippet antecipadamente e classificar a formatação, converter XML " <" para " &lt;" etc.

Existem várias perguntas nessa área no SO, mas não consegui encontrar nenhuma que abordasse essa questão diretamente.

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

formatting  blogs  blogger 
— rbrayb
fonte
3
Para exibir o código formatado: Se você estiver usando o visual studio, poderá copiar qualquer tipo de código html / css / javascript / c # etc para o blogger. Você tem que instalar ferramentas eléctricas de produtividade do Visual Studio: para mais informações leia-se: coding-issues.blogspot.in/2013/10/...
— Ranadheer Reddy
Experimente o plug-in Colar como código offline do Visual Studio para o Windows Live Writer para o editor offline do Blogger. WYSIWYG! .
— herohuyongtao
Está faltando um armário de conteúdo social como o WordPress? agora você pode adicionar isso no blogger também stackoverflow.com/questions/27619171/…
— craig lerr
1
Você pode usar este site para obter o código spinet realce de código para vários idiomas. dá-lhe HTML que você pode publicá-la em seu blog hilite.me
— Bhavikkumar
Você pode copiar o código no intellij e colar no seu blog. Funciona como um encanto para mim no meu blog - codetails.blogspot.com/2017/11/design-pattern-in-java.html
— user3871494

Respostas:

253

Eu criei uma entrada de postagem no blog que explica como adicionar destaque de sintaxe ao código ao blogueiro usando o syntaxhighlighter 2.0

Aqui está o meu post:

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

Espero que ajude vocês .. Estou bastante impressionado com o que isso pode fazer.

— CraftyFella
fonte
2
Alguém pode confirmar se isso ainda funciona? Tentei colar a tag de script logo antes da </head>seção e adicionei a tag pré ao meu código também. Nenhuma mudança embora.
— Arviman
2
Passei algumas horas nisso e não consigo fazer isso funcionar.
— thepaulpage
1
Não está funcionando bem para o DYNAMIC view blogger, você pode fornecer alguma alternativa? heres meu blog com dinâmica vista satindersinght.blogspot.in
— Satinder singh
1
Parece que o código que você deve copiar e colar está faltando algo na parte superior, especificamente uma tag <script>.
— John Little
1
A resposta de Samuel é muito melhor. Não gosto de adicionar tantos javascripts no meu blog apenas para um mero destaque de sintaxe. Especialmente as páginas que não possuem nenhuma sintaxe a ser destacada são um exagero.
— divinedragon
126

A maneira mais fácil de compartilhar código é com uma informação pública. Basta escrever uma e colar no código incorporado. Mole-mole.

http://gist.github.com

Para resolver o problema do mecanismo de pesquisa, pode-se usar oculto divna página tão simples quanto:

<div style="display:none"> content </div>
— yodaisgreen
fonte
cara, depois de usá-lo por 20 minutos, não posso agradecer o suficiente! A melhor formatação, sem problemas, todo o código está em um só lugar, as postagens são lindas, a edição de uma postagem é incrivelmente fácil, pois você não mistura o código com o restante da postagem e nunca se preocupe. algo estúpido e perder / malformar qualquer código. Thanx homem!
— Elijah Saounkine
19
A incorporação é javascript, há uma boa chance de ser invisível para pesquisar. Isso praticamente o mata nas postagens do blog.
— James Moore
6
Atualmente, estou usando gists, mas provavelmente usarei o SyntaxHighlighter novamente. Não apenas as listas principais usam JavaScript (o que as torna inacessíveis nos leitores de RSS), mas também diminuem o carregamento da página, porque todas as listas principais são baixadas sequencialmente, bloqueando a renderização. Não é uma boa escolha.
— Tomasz Nurkiewicz 28/10
Obrigado! Você fez meu dia. Eu só vou compartilhar esse script para adicionar essência para blogger: github.com/moski/gist-Blogger
— daniel.sedlacek
1
Essa ideia realmente funciona bem! o resultado é apenas o que eu preciso; código bem formatado ... mas não vou concordar com isso. Prefiro que meu post seja completo por si só. Ter o código, que faz parte do post, hospedado em outro lugar e incluído via js, acaba com isso!
— dade 25/01
63

Para o meu blog, uso http://hilite.me/ para formatar o código fonte. Ele suporta muitos formatos e saídas html bastante limpas. Mas se você tiver muitos trechos de código, precisará fazer muita cópia e colar. Para formatar o código Python, também usei Pygments ( publicação no blog ).

— Samuel
fonte
Eu costumava usar o hilite.me , mas agora prefiro o dillinger.io
— GoYun.Info
Eu também prefiro isso ao gist.github. Não é necessário javascript e estilo / css adicionais. Obrigado senhor.
— Prabowo Murti
40

Esse script css pode ser útil para todos - não é para realçar 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 usar :

  1. Cole este trecho no editor de texto,
  2. cole seu código no bloco <<<<<< >>>>>>.
  3. Copie tudo e
  4. cole na visualização HTML no editor de postagem do blogger (ou qualquer outro).

BENEFÍCIOS: Simples e fácil de usar, menos configuração, fácil de reconfigurar, sem software extra

— gtiwari333
fonte
1
A resposta mais simples e pura na minha opinião. Basta criar um CSS interno e pronto.
— Rishik Mani 24/10
funcionando bem para mim também. solução simples
— Hasitha
15

Isso pode ser feito facilmente com o SyntaxHighlighter. Tenho instruções passo a passo para configurar o SyntaxHighlighter no Blogger no meu blog. O SyntaxHighlighter é muito fácil de usar. Ele permite que você publique trechos em formato bruto e, em seguida, agrupe-os em preblocos 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 alterar o nome do pincel para "python" ou "java" ou "javascript" e cole o código de sua escolha. A marcação CDATA permite que você coloque praticamente qualquer código lá sem se preocupar com o escape de entidade ou outros aborrecimentos típicos dos blogs de código.

— Alain O'Dea
fonte
1
Suas instruções funcionaram melhor para mim do que a outra resposta principal. Caso alguém se encontre procurando por eles, aqui está a lista de pincéis agrupados e seus aliases.
— Scott
13

1. Primeiro, faça backup do seu modelo de blogueiro
2. Depois disso, abra seu modelo de blogueiro (no modo Editar HTML) e copie todos os css fornecidos neste link antes da </b:skin>tag
3. Cole o código a seguir antes da </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. Cole o seguinte código antes da </body>tag.

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

5. Salve o modelo do Blogger.
6. Agora, o destaque da sintaxe está pronto para uso, você pode usá-lo com a <pre></pre>tag.

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

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

7. Você pode escapar do seu código aqui .
8. Aqui está a lista do idioma suportado para o <class>atributo.

— Mahesh Meniya
fonte
Um bom link. Seria melhor se ele fosse formatado em cores! +1
— Gaʀʀʏ
@le_garry: obrigado, tive um problema ao formatar o snippet de código, para que não fique colorido.
— Mahesh Meniya
Veja a resposta por gissolved. O melhor marcador que eu já vi até agora e é colorido.
— Gaʀʀʏ
@le_garry Ohh, você está pensando em destacar a sintaxe no Blogger. Ele funciona bem com cores. I entender mal que está a tomar sobre a minha resposta Então, eu tive triste que eu tinha cara alguns problm ..
— Mahesh Meniya
@MaheshMeniya eu segui todas as etapas que você escreveu para a sintaxe syntaxhighlighter, mas não está funcionando, existe algum pensamento extra sobre o que estou perdendo?
— AA.SC 02/11/19
5

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

— Rico
fonte
Não funciona mais.
— Г И І О
4

Eu criei uma ferramenta que faz o trabalho. Você pode encontrá-lo no meu blog:

Online grátis C # Code Colorizer

Além de colorir seu código C #, a ferramenta também cuida de todos os símbolos '<' e '>' convertendo-os em '& lt;' e '& gt;'. As guias são convertidas em espaços para ter a mesma aparência em navegadores diferentes. Você pode até fazer o colorizador alinhar os estilos CSS, caso não possa ou não queira inserir uma folha de estilos CSS em seu blog ou site.

— Pavel Vladov
fonte
3

Eu uso o SyntaxHighlighter no meu blog do Blogger. O site real está hospedado no meu próprio servidor, e não no Blogger (o Blogger tem a opção de enviar mensagens para o seu próprio site), mas ter seu próprio domínio e hospedagem na web custa apenas alguns dólares por mês.

— Pete Kirkham
fonte
Concordo - há várias opções se eu hospedar meu próprio blog, mas não parece haver muito suporte quando o blog é realmente hospedado pelo Blogger.
— Rbrayb
2

Na verdade, eu usei (o que mais ;-)) o Vim para isso: ele possui um "plugin" 2html. Veja os documentos aqui .

Então, ao editar meu código, apenas o converto para HTML e colo os resultados no editor de HTML do Blogger.

Nota: não é um HTML tão bonito (o CSS embutido seria melhor), mas simplesmente funciona.

Ah: e possui arquivos de sintaxe para vários idiomas, o que o torna bastante útil.

— Zsolt Botykai
fonte
1

Resposta específica do Emacs: No que diz respeito ao blogueiro, ele permite CSS embutido. O problema com os marcadores baseados em javascript é que você precisa viver com o esquema de cores ou implementar o seu próprio. Mas, como eu, se você é fã do seu próprio esquema de cores emacs, tem uma opção muito melhor disponível. Eu hackeei o pacote "htmlize.el" do emacs para adicionar as quatro funções a seguir ...

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

Essas funções produzirão html pronto para copiar e colar (estilo embutido) em um novo buffer no emacs, que você pode usar diretamente em sua postagem no blog. A saída parece exatamente igual à que você veria o código no emacs (incluindo o esquema de cores).

Aqui está um link para o meu blog , onde você pode encontrar informações detalhadas de como usar o "blog-htmlize.el" no emacs. Isso acaba com a codificação html dos sinais "menor que" e "maior que" também. E como o emacs está realçando todo o destaque e estilo, você não precisa se preocupar se a biblioteca js suporta o idioma dos seus snippets, nem se intrometer com o código do seu modelo no blogger.

Você pode encontrar o arquivo elisp aqui (salve o arquivo como blog-htmlize.el )

— Sujeet
fonte
0

Eu rolei o meu em F # (veja esta pergunta), mas ainda não é perfeito (eu apenas regexps, então não reconheço classes ou nomes de métodos etc.).

Basicamente, pelo que sei, o editor do blogueiro às vezes comerá seus colchetes angulares se você alternar entre o modo Compor e HTML. Então você precisa colar no modo HTML e salvar diretamente. (Posso estar errado nisso, tentei agora e parece funcionar - depende do navegador?)

É horrível quando você tem genéricos!

— Benjol
fonte
0

Para postar seu html, javascript, c # e java, você deve converter caracteres especiais em código HTML. como '<'quanto &lt;e '>'para &gt;e etc.

Adicione este link Conversor de código ao iGoogle. Isso o ajudará a converter os caracteres especiais.

Em seguida, adicione a nova versão do SyntaxHighlighter 3.0.83 para personalizar seu código no blogger. Mas você deve saber como configurar a sintaxeHighlighter no seu modelo de blogueiro.

— Mdhar9e
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.