Come posso elencare gli elenchi di codici usando i CSS?

Mi piacerebbe visualizzare frammenti di codice del linguaggio di programmazione, e anche codice HTML, all'interno di un documento HTML usando CSS. Voglio che sia rientrato e font a spaziatura fissa ... sto pensando a qualcosa di simile:Come posso elencare gli elenchi di codici usando i CSS?

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

e farlo apparire in un modo ben formattata (bonus se è colore codificato, ma non lo fa dovrebbe essere così.

Come posso fare questo usando i CSS?

fonte

2010-10-22 user248237dfsf

di colori alle volontà richiede uno dei vari evidenziatori di sintassi disponibili. Le soluzioni sono puramente JavaScript se non si ha accesso a PHP. – drudge

Beh, si potrebbe provare a utilizzare un pre > tag < nel vostro blockquote per conservare la formattazione prima, e quindi utilizzare un font a spaziatura fissa, come corriere per stile css

Qualcosa di simile potrebbe funzionare nel css:

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

fonte

2010-10-22 20:45:19 Gopherkhan

In primo luogo, vorrei mostrare il codice in un elemento <pre> </pre> dare l'elemento pre uno stile piacevole nel CSS e chiamare un giorno.

fonte

2010-10-22 20:46:34 FatherStorm

<pre> manterrà automaticamente le schede e interruzioni di riga all'interno dei tag di limite pre. La maggior parte dei browser predefiniti automaticamente un font a spaziatura fissa all'interno pre ma se si vuole per forzarlo, (che è una buona idea) è possibile utilizzare il seguente CSS:

pre { font-family: monospace; }

vorrei raccomandare che si non posto codice direttamente in un elemento <blockquote>. È semanticamente scorretto.

Se si desidera che il codice sia semanticamente corretto, si dovrebbe contrassegnare in su in questo modo:

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

Se si è in realtà "citando" un blocco di codice, allora la marcatura sarebbe:

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

Se si desidera un codice ancora più bello, è possibile utilizzare il codice Prettify di Google Code che è used by StackOverflow in codice colore snippet. Ha i propri fogli di stile che importa automaticamente in base a quale linguaggio pensa che sia il codice e colora di conseguenza il codice. Puoi dare un suggerimento su quale lingua è il codice appending a class.

fonte

2010-10-22 20:58:19 sholsinger

'codice' non può contenere elementi di blocco come' pre'. – fuxia

Il mio male, hai ragione. 'code' dovrebbe essere _inside_ di' pre' – sholsinger

code-prettify è fantastico! –

Questa libreria javascript sembra eccellente:

https://highlightjs.org/

UPDATE: Ho usato anche questo sul mio blog Tumblr-based perché era più facile da implementare:

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

e ho usato anche questo (alcune funzioni extra):

http://alexgorbatchev.com/SyntaxHighlighter/

fonte

2013-10-13 19:42:04

Definitivamente il powerhouse di scelta in questo elenco per ridurre il lavoro e avere le migliori uscite di blocchi di codice. – Ezos

condivisione di un esempio che uso nel sito, io uso seguente pre nel mio foglio di stile:

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

Questo dà i seguenti risultati:

fonte

2018-02-08 21:15:32

si può prendere uno sguardo alla prismjs per evidenziare il codice.

È possibile personalizzare il pacchetto come desiderato da here e l'ingombro di questo pacchetto sarà ancora minimo.

Una volta che hai un pacchetto, quindi è possibile utilizzarlo come di seguito:

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

Una volta che la messa a punto di cui sopra è fatto, quindi è possibile utilizzarlo come di seguito:

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

fonte

2018-03-06 05:13:32

Come posso elencare gli elenchi di codici usando i CSS?

risposta

Problemi correlati