Formatando trechos de código para blogs no blogger [fechado

StackOverflow https://stackoverflow.com/questions/679189

  •  21-08-2019
  •  | 
  •  

Pergunta

Meu blog está hospedado no Blogger e eu costumo postar trechos de código em C / C# / Java / XML etc. Mas acho que o trecho é "mutilado".

Existem sites que eu poderia usar para analisar o trecho de antemão e resolver a formatação, converta xml "<" para "&lt;"etc.

Há um número de perguntas sobre essa área, mas eu não consegui encontrar nenhum endereço que aborda diretamente essa questão.

Edit: Por @Rico Resposta, estados do site "Para exibir o código formatado em seu site, você precisa obter esta folha de estilo CSS e adicionar uma referência a ele no <head> Seção da sua página ". Esse é o problema - você não pode fazer isso no blogueiro Afaik.

Foi útil?

Solução

Eu criei uma entrada de postagem no blog que explica como adicionar o Code Syntax Destacando ao Blogger usando o SyntaxHightlester 2.0

Aqui está o meu post no blog:

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.

Outras dicas

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

http://gist.github.com

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

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

Para o meu blog, eu uso http://hilite.me/ para formatar o código fonte. Ele suporta muitos formatos e saídas bastante limpos HTML. Mas se você tiver muitos trechos de código, precisará fazer muita pasta de cópia. Para formatar código python, eu também usei Pigmentos (Postagem do blog).

Este script CSS pode ser útil para todos - não é para destaque da 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 em <<<<<< >>>>>> BLOCO.
  3. Copie tudo e
  4. Cole a visualização HTML no Blogger (ou em qualquer outro) editor de postagens.

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

Isso pode ser feito com bastante facilidade com o SyntaxHightlester. Eu tenho Instruções passo a passo para configurar o SyntaxHightlester no blogueiro no meu blog. SyntaxHightlester é muito fácil de usar. Permite postar trechos em forma bruta e depois envolvê -los pre 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 alterar o nome do pincel para "python" ou "java" ou "javascript" e colar no código de sua escolha. A etiqueta do CDATA Vamos colocar praticamente qualquer código lá sem se preocupar com a escape da entidade ou outros aborrecimentos típicos dos blogs de código.

1. Primeiro, faça o backup do seu modelo de blogueiro
2. Depois disso, abra seu modelo de blogueiro (no modo HTML Edit) e copie o All CSS Dado neste link antes da </b:skin> marcação
3. Cole o código seguinte antes </head> marcação

<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 </body> marcação.

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

5. Salvar o modelo do blogger.
6. Agora, o destaque da sintaxe está pronto para uso, você pode usá -lo <pre></pre> marcação.

<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 é a lista de linguagem suportada para <class> atributo.

http://formatmysourcecode.blogspot.co.uk/Funciona bem, basta copiar, formatar, colar de volta.

Aqui está um site Isso formará seu código e cuspirá HTML, e inclui até estilos embutidos para coloração de sintaxe. Pode não funcionar para tudo de suas necessidades, mas é um bom começo. Eu acredito que ele disponibilizou a fonte se você quiser estendê -la:

Eu uso uma solução de tecnologia bastante baixa. Eu formato o código usando isso Sintaxe on -line destaque Ferramenta então coloque -a no blog

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

Colorizador de código C# online grátis

Além de colorizar seu código C#, a ferramenta também cuida de todos os símbolos '<' e'> ', conversando -os para' <'e' ''. As guias são convertidas em espaços para ter a mesma aparência em diferentes navegadores. Você pode até fazer com que o colorizer embrulhasse os estilos CSS, caso não possa ou não deseja inserir uma folha de estilo CSS em seu blog ou site.

eu uso SyntaxHightlester com meu blog com o blogueiro. O site real está hospedado no meu próprio servidor, e não no Blogger (o Blogger tem uma opção de postagens ftping em seu próprio site), mas ter seu próprio domínio e hospedagem na web custa apenas alguns dólares por mês.

Parece que houve algumas mudanças com SyntaxHightlester 2.0 Isso facilita o uso do Blogger.

Há versões hospedadas dos estilos e javascripts em: http://alexgorbatchev.com/pub/sh/

Na verdade, eu tinha usado (o que mais ;-)) vim para isso: ele tem um 2HTML "plugin". Ver os documentos aqui.

Então, enquanto edito meu código, apenas o converto em HTML e colo os resultados no editor HTML do Blogger.

Nota: Não é tão bonito HTML (CSS incorporado seria melhor), mas funciona.

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

Emacs specific answer : As far as blogger is concerned, it allows inline css. The problem with javascript based highlighters is that you have to live with their color scheme or implement your own. But, like me, if you are a fan of your own emacs color scheme, you have a much better option available. I have hacked up the "htmlize.el" package for emacs to add the following four functions...

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

These functions will output copy-paste ready html (inline styled) in a new buffer in emacs, which you can directly use in your blog post. The output looks exactly same as you would see the code in emacs (including the color scheme).

Here is a link to my blog, where you can find detailed information of how to use the "blog-htmlize.el" with emacs. This does away with html-encoding the "less than" and "greater than" signs also. And as emacs is doing all the highlighting and styling, you do not have to worry about whether the js library supports the language of your snippets, nor do you have to meddle with your template code in blogger.

You can find the elisp file here (save the file as blog-htmlize.el)

I rolled my own in F# (see this question), but it still isn't perfect (I just do regexps, so I don't recognise classes or method names etc.).

Basically, from what I can tell, the blogger editor will sometimes eat your angle brackets if you switch between Compose and HTML mode. So you have to paste into HTML mode then save directly. (I may be wrong on this, just tried now and it seems to work - browser dependent?)

It's horrible when you have generics!

To post your html, javascript,c# and java you should convert special characters to HTML code. as '<' as &lt; and '>' to &gt; and e.t.c..

Add this link Code Converter to iGoogle. This will help you to convert the special characters.

Then add SyntaxHighlighter 3.0.83 new version to customize your code in blogger. But you should know How to configure the syntaxHighlighter in your blogger template.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top