Codice a due colonne in Markdown

Question

Vorrei scrivere un documento che spieghi lo standard di codifica con esempi di codifica validi e non validi. Ogni regola ha un numero una descrizione e un esempio.

Per esempio qui è la regola 1:

# Rule 1 
Description for rule 1. 

## Good 
```c 
int foo (void) 
{ 
    int i; 
} 
``` 

## Bad 
```c 
int foo (void) { 
    int i; 
} 
``` 

da ciascuna regole individal, vorrei generare un PDF o una pagina HTML con una tabella globale dei contenuti.

Come posso scrivere un codice compatibile Markdown che può rappresentare blocchi di codice allineati orizzontalmente con colorazione sintattica?

Ti piace questa:

O questo:

  Good    Not Good 
.---------------------+--------------------. 
| int foo (void)  | int foo (void) { | 
| {     | int i;   | 
| int i;   | }     | 
| }     |     | 
'---------------------+--------------------' 

Sono consapevole che posso aggiungere metadati come ad esempio i tag HTML a un documento Markdown. Quindi potrei essere in grado di scrivere qualcosa del genere:

<good> 
```c 
int foo (void) 
{ 
    int i; 
} 
``` 
</good> 
<bad> 
```c 
int foo (void) { 
    int i; 
} 
``` 
</bad> 

ed elaborare i dati in seguito (io ancora non so come)

markdown -> own-tags-processing -> LaTeX -> pdf 
markdown -> own-tags-processing -> HTML 

Esiste un modo migliore per allineare orizzontalmente due blocchi di codice orizzontalmente?

Answer 1

Non è possibile, almeno non con puro Markdown in quanto non ha alcun concetto di colonne. Come spiegato nello rules:

L'idea per Markdown è di semplificare la lettura, la scrittura e la modifica della prosa. HTML è un formato di pubblicazione; Markdown è un formato di scrittura. Pertanto, la sintassi di formattazione di Markdown riguarda solo i problemi che possono essere trasmessi in testo normale.

Per qualsiasi markup non coperto dalla sintassi di Markdown, è sufficiente utilizzare l'HTML stesso.

In effetti, il modo migliore sarebbe disporre di ciascun blocco di codice racchiuso in un <div> con la classe appropriata assegnata a ciascun div. Tuttavia, la maggior parte dei parser di Markdown non analizza Markdown all'interno di un blocco HTML non elaborato. Pertanto, potrebbe essere necessario definire anche il blocco di codice in HTML non elaborato. Controlla l'elenco delle funzionalità del parser per scoprirlo. Se non si è in grado di definire il proprio CSS da utilizzare separatamente da Markdown (per lo stile dell'HTML), sarà necessario definire gli stili in linea nel codice HTML. This question include un buon esempio di come potrebbe essere. Basta sostituire i commenti con i blocchi di codice appropriati. Se si deve definire i blocchi di codice in HTML grezzo, come sarebbero in questo modo:

<pre><code class="language-c">int foo (void) 
{ 
    int i; 
} 
</code></pre> 

Così, il documento finale che è sicuro di lavorare in tutta (la maggior parte?) Parser Markdown sarebbe simile a questa:

# Rule 1 
Description for rule 1. 

<div style="-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-rule: 1px dotted #e0e0e0; -moz-column-rule: 1px dotted #e0e0e0; column-rule: 1px dotted #e0e0e0;"> 
    <div style="display: inline-block;"> 
     <h2>Good</h2> 
     <pre><code class="language-c">int foo (void) 
{ 
    int i; 
} 
</code></pre> 
    </div> 
    <div style="display: inline-block;"> 
     <h2>Bad</h2> 
     <pre><code class="language-c">int foo (void) { 
    int i; 
} 
</code></pre> 
    </div> 
</div> 

Si noti che questo utilizza uno dei molti modi diversi per definire le colonne in CSS. I metodi diversi potrebbero non funzionare in diversi browser. YMMV.