Wie bekomme ich Inline-Code mit Jekyll und Pygmente?

Question

Ich benutze Markdown mit Liquid-Tags, um Code für eine Jekyll-generierte Site zu markieren, und möchte Code einfügen, der sowohl inline (in einem Absatz) als auch farbig (mit Pygments) ist scheint nicht zu funktionieren.

Das Markup

Lorem ipsum dolor {% highlight javascript %} var sit = "amet"; {% endhighlight %} consectetur adipiscing elit. 

Ergebnisse in

<p>Lorem ipsum dolor <div class='highlight'><pre><code class='javascript'> <span class='kd'>var</span> <span class='nx'>sit</span> <span class='o'>=</span> <span class='s2'>&quot;amet&quot;</span><span class='p'>;</span></code></pre></div> consectetur adipiscing elit.</p> 

Ich würde sehr wie markierten Text nicht in <div class='highlight'> oder zumindest eingewickelt werden, haben sie eine <span class='highlight'> sein.

Die Verwendung von {% highlight javascript nowrap %} funktioniert nicht, wie suggested elsewhere. (Vielleicht ist dies ein Problem mit meinem Setup-die Ruby 2.0, Jekyll 0.12.1, pygments.rb 0.3.7?)

Ich mag würde host this page on GitHub zu, was bedeutet, ich nicht auf ein Plugin verlassen kann. Bumm, oder?

Nachtrag: Zeilennummerierung (dh. {% highlight javascript linenos %}) scheint auch nicht zu funktionieren. Mann.

Answer 1

Was ist das Problem mit der .highlight div? Es ist dort platziert, um die Syntax-Hervorhebung einfach zu gestalten. Um den Wrapper in einen Bereich zu ändern, müssen Sie die Jekyll-Konfiguration ändern.

Linenummers erscheinen nur, wenn Sie ein mehrzeiliges Snippet haben.

Answer 2

Sie können jedem Objekt, das Sie in einen Beitrag einfügen, eine CSS-Klasse hinzufügen.

Wenn Sie definieren eine CSS-Eintrag wie folgt aus:

.inlined { display:inline; } 

Anschließend können Sie diese Klasse, um die erzeugte <div> tun dies hinzufügen:

Lorem ipsum dolor 
{% highlight javascript %}var sit="amet"; {% endhighlight %}{: .inlined } 
consectetur adipiscing elit. 

Dies funktioniert mit allen Arten von Objekten (Tabellen, Bilder usw.). Ich kann es jetzt nicht testen, aber ich denke, das wird das Problem lösen.

Wenn Sie es testen, sehen Sie sich die Ausgabe HTML an. Sie werden dann feststellen, dass Ihr <div> jetzt das class=inlined Attribut festgelegt hat.

Answer 3

Der einfachste Weg, dies zu tun, ist Github Flavored Markdown und verwenden Sie ihre Standard-Inline-Code.

in Ihrer _config.yml Datei, ändern Sie Ihre Abschrift zu redcarpet. Sie sind jetzt bereit, mit GFM zu gehen.

markdown: redcarpet 

Jetzt können Sie alle GitHub Markdown folgen. Gehen Sie Inline-Code wie folgt:

Here is some `inline code` in the middle of sencence 

Answer 4

Wenn Sie die folgenden zwei Funktionen enthalten (und nennen sie):

var inlineElements = function() { 
    var inlinedElements = document.getElementsByClassName('inlined'); 
    inlinedElements = Array.prototype.concat.apply([], inlinedElements); // copy 
    for (var i = 0; i < inlinedElements.length; i++) { 
     var div = inlinedElements[i]; 
     var span = document.createElement('span'); 
     span.innerHTML = div.children[0].innerHTML; 
     var previous = div.previousElementSibling; 
     var paragraph; 
     if (previous.tagName.toLowerCase() === 'p') { 
      paragraph = previous; 
     } else { 
      paragraph = document.createElement('p'); 
      div.parentNode.insertBefore(paragraph, div); 
     } 
     div.remove(); 
     paragraph.innerHTML += ' ' + span.innerHTML + ' '; 
     paragraph.classList.add('highlight'); 
     paragraph.classList.add('inlined'); 
     if (div.classList.contains('connectNext')) { 
      paragraph.classList.add('connectNext'); 
     } 
    } 
} 

var connectElements = function() { 
    while (true) { 
     var connectNextElements = document.getElementsByClassName('connectNext'); 
     if (connectNextElements.length == 0) break; 
     var prefix = connectNextElements[0]; 
     var next = prefix.nextElementSibling; 
     prefix.innerHTML += ' ' + next.innerHTML; 
     next.remove(); 
     if (!next.classList.contains('connectNext')) { 
      prefix.classList.remove('connectNext'); 
     } 
    } 
} 

inlineElements(); 
connectElements(); 

können Sie verwenden .inline und.connectNext im Markdown:

{% highlight objective-c %} 
[[NSObject alloc] init]; 
{% endhighlight %} {: .inlined .connectNext } 
vs. 
{% highlight java %} 
new Object(); 
{% endhighlight %} {: .inlined } 

.connectNext wird der Text nach dem Codeblock stellt sicher, dass auch in den gleichen <p> inlined wird.