Haben unterschiedliche Stil gelten für verschiedene Syntax Highlighter Sprachen

Question

Ich habe eine Jekyll-Site, wo ich viele Shell-Beispiele in Code-Blöcken post. Ich bemühe mich, visuell zwischen den script/shell-Befehlen und ihrer Ausgabe der commands zu unterscheiden.

generiert html:

<pre><code class="language-powershell"> 
function DemoCode { 
    return 'rab', 'oof' 
} 
DemoCode 

rab 
oof 
</code></pre> 

In diesem Beispiel sind die letzten beiden Zeilen müssen natürlich die Ausgabe von den ersten 4 Zeilen sein.

Markdown ist derzeit nur normal Triple-Graviszeichen mit einem Powershell-tag:

```powershell 
function DemoCode { 
    return 'rab', 'oof' 
} 

DemoCode 

rab 
oof 
``` 

Ich würde es vorziehen, sie in einen zweiten Codeblock zu vermeiden, zu splitten. Wordpress ließ mich dies mit Inline-Style-Tags machen, aber es war ein Schwein von einem Job.

Das ist für mich keine gute Lösung, aber ich einen separaten Codeblock mit dem ‚Klartext‘ Tag des Syntax-Highlighter haben könnte:

Das Beste, was ich bisher ist in der Tat mit separaten Codeblöcken. Wenn ich den "plaintext" -Tag auf rouge anwende, dann bekomme ich zumindest keine Syntax-Hervorhebung, was hilft. Aber das generierte HTML erbt immer noch das gleiche CSS von .highlight.

Markdown:

```powershell 
function Write-Stuff { 
    Write-Output $Stuff 
} 
``` 

```plaintext 
Output I would like with different color and background-color 
``` 

Ich brauche immer noch, dass verschiedene CSS zu erben, though. Generiert HTML:

<div class="language-powershell highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">#this is formatted with md code block and powershell tag</span> 
</code></pre></div></div> 

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#formatted with md code block and plaintext tag 
</code></pre></div></div> 

Answer 1

Wenn Sie mit separaten Code-Blöcke gehen möchten, können Sie einen Block IAL verwenden, um eine benutzerdefinierte Klasse auf der Syntax zu setzen Blöcke hervorgehoben:

{:.my-custom-class} 
``` powershell 
function Write-Stuff { 
    Write-Output $Stuff 
    } 
``` 

Dies würde legen Sie die my-custom-class Recht neben language-powershell highlighter-rouge, so dass Sie Ihr CSS entsprechend anpassen können.

So vermeiden Sie das Aufteilen des Blocks: Das ist mit kramdown nicht möglich. Sie können jedoch eine custom syntax highlighter implementieren, die weiß, wie dies zu tun ist.