Como posso listar códigos usando CSS?

Question

Como posso listar códigos usando CSS?

Eu gostaria de mostrar trechos de código de linguagem de programação, e também código HTML, dentro de um documento HTML usando CSS. Quero que seja indentado e com uma letra de Largura Fixa... Estou a pensar em algo do género:

<blockquote style="some_style">
my code here
my code here also
</blockquote>

E que apareça de forma formatada (bónus se estiver codificado por cores, mas não tem de estar.

Como posso fazer isto usando CSS?

30

html css

Author: Shog9, 2010-10-23

Source

6 answers

score 30 · Answer 1

Esta biblioteca de javascript parece excelente.

Https://highlightjs.org/

UPDATE: também usei isto no meu blog baseado no Tumblr porque era mais fácil de implantar:

Https://github.com/google/code-prettify

E eu usei este também (algumas características extras):

Http://alexgorbatchev.com/SyntaxHighlighter/

score 16 · Answer 2

<pre> manteria automaticamente as suas páginas e quebras de linha dentro das marcas delimitadoras pre. A maioria dos navegadores predefinem automaticamente para um tipo de letra monoespaçado dentro de pre, mas se quiser forçá-lo (o que é uma boa ideia), poderá usar o seguinte CSS:

pre { font-family: monospace; }

Eu recomendaria que você Não Coloque o código diretamente em um elemento <blockquote>. É semanticamente incorreto.

Se queres que o teu código esteja semanticamente correcto, devias marcá-lo como isto:

<pre><code>
My pre-formatted code
    here.
</code></pre>

Se você está realmente "citando" um bloco de código, então a marcação seria:

<blockquote><pre><code>
My pre-formatted "quoted" code here.
</code></pre></blockquote>

Se quiser um código ainda mais bonito, pode usar o código do Google Pretify que é usado pelo StackOverflow para excertos de códigos de cores. Tem as suas próprias folhas de estilo que importa automaticamente com base na linguagem que pensa que o código é e cores o código em conformidade. Você pode dar-lhe uma dica sobre qual a língua que o código é por adicionando um Classe

score 10 · Answer 3

Partilhando um exemplo que uso no sítio Web, uso o seguinte pre na minha folha de estilo:

pre {
    background: #f4f4f4;
    border: 1px solid #ddd;
    border-left: 3px solid #f36d33;
    color: #666;
    page-break-inside: avoid;
    font-family: monospace;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1em 1.5em;
    display: block;
    word-wrap: break-word;
}

Isto dá os seguintes resultados:

score 8 · Answer 4

Bem, você pode tentar usar uma etiqueta

 no seu bloco para preservar a formatação primeiro, e depois usar um tipo de letra monoespaçado, como o courier para o estilo css.

Uma coisa destas funcionaria no css.

pre {
  font-family:     "Courier New"
                    Courier
                    monospace;
}

score 3 · Answer 5

{[[2]} Primeiro, eu mostraria o código em um elemento {[[[0]} dar ao elemento pre um bom estilo em seu css e terminar por hoje.

3

Author: FatherStorm, 2010-10-22 20:46:34

score 1 · Answer 6

Você pode dar uma olhada no prismjs para destacar o código.

Você pode personalizar o pacote como o seu desejo de aqui e a pegada deste pacote será ainda mínima.

Uma vez que tenha um pacote, então pode usá-lo como abaixo:

<!DOCTYPE html>
<html>
  <head>
    ...
    <link href="themes/prism.css" rel="stylesheet" />
  </head>
  <body>
    ...
    <script src="prism.js"></script>
  </body>
</html>

Uma vez feita a configuração acima, então você pode usá-la como abaixo:

<pre><code class="language-css">p { color: red }</code></pre>