Jak uzyskać kod in-line z Jekyll i Pygments?

Question

Używam Markdown z etykietami Liquid, aby oznaczyć kod dla strony generowanej przez Jekyll i chciałbym dołączyć kod, który jest zarówno w linii (w akapicie) i ma kolorową składnię (z Pygments), ale wydaje się nie działać.

Znaczniki

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

skutkuje

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

bym bardzo podobny podświetlony tekst nie może być owinięty w <div class='highlight'>, albo przynajmniej mają to być <span class='highlight'>.

Używanie {% highlight javascript nowrap %} nie działa, tak jak suggested elsewhere. (Być może jest to problem z moim setup-co jest Ruby 2.0, Jekylla 0.12.1, pygments.rb 0.3.7?)

chciałbym host this page on GitHub, co oznacza Nie mogę polegać na wtyczce. Bummer, prawda?

Dodatek: Numeracja linii (np.) również nie działa. Człowiek.

Answer 1

Na czym polega problem z .highlight div? Umieszczono go, aby ułatwić podświetlanie składni. Aby zmienić opakowanie na rozpiętość, zakładam, że musisz zmienić konfigurację Jekyll.

Linenumbers pojawiają się tylko wtedy, gdy masz wielowierszowy fragment.

Answer 2

Możesz dodać klasę CSS do dowolnego obiektu, który umieścisz w poście.

Jeśli definiować wpis CSS tak:

.inlined { display:inline; } 

Następnie można dodać tę klasę do wygenerowanego <div> ten sposób:

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

ten współpracuje z wszelkiego rodzaju obiektów (tabele, obrazy itp.). Nie mogę tego teraz przetestować, ale myślę, że rozwiąże to problem.

Po przetestowaniu spójrz na wyjściowy kod HTML. Przekonasz się, że Twój <div> ma teraz ustawiony atrybut class=inlined.

Answer 3

Najprostszym sposobem na to jest użycie Github Flavored Markdown i użycie ich domyślnego kodu wbudowanego.

w pliku _config.yml, zmień swoją wartość na redcarpet. Jesteś gotowy do pracy z GFM.

markdown: redcarpet 

Teraz możesz śledzić wszystkie GitHub Markdown. Aby wykonać kod inline następująco:

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

Answer 4

Jeśli obejmują następujące dwie funkcje (i nazywają je):

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(); 

Można użyć .inline i.connectNext w Markdown:

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

.connectNext pozwoli upewnić się, że tekst po bloku kodu jest również inlined w tym samym <p>.