지킬과 Pygments를 사용하여 인라인 코드를 얻으려면 어떻게해야합니까?

Question

Liquid 태그가있는 Markdown을 사용하여 Jekyll에서 생성 된 사이트의 코드를 마크 업하고 단락에서 인라인 (Pygements)으로 색이 지정된 코드를 포함하고자하지만 작동하지 않는 것 같습니다.

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

에서

마크 업

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

결과는 난 아주 많이 강조 표시된 텍스트는 <div class='highlight'>에 싸여 수없는 것처럼, 또는 적어도 그것이 <span class='highlight'> 될 것이다.

을 사용하면 suggested elsewhere으로 작동하지 않습니다. I가 host this page on GitHub 싶습니다

, 내가 플러그인에 의존 할 수 없음을 의미한다 (아마도 이것은 내 설치 - 루비 2.0, 지킬 0.12.1, pygments.rb 0.3.7?의 문제입니다). 버머 맞지?

부록 : 줄 번호 (즉, {% highlight javascript linenos %})는 작동하지 않습니다. 남자.

Answer 1

.highlight div의 문제점은 무엇입니까? 주제를 쉽게 강조 할 수 있도록 구문 강조를 표시합니다. 래퍼를 스팬으로 변경하려면 지킬 구성을 변경해야합니다.

줄 번호는 멀티 라인 코드 조각이있는 경우에만 나타납니다.

Answer 2

게시물에 넣는 모든 객체에 CSS 클래스를 추가 할 수 있습니다.

이 같은 CSS 항목을 정의하는 경우 : 그런 다음 생성 된 <div>에이 클래스를 추가 할 수 있습니다

.inlined { display:inline; } 

이 일을 :

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

이 개체의 모든 종류의 작동 (테이블, 이미지 등). 지금 당장은 테스트 할 수 없지만 이것이 문제를 해결할 것이라고 생각합니다.

테스트 할 때 출력 HTML을 확인하십시오. 이제 <div>에 class=inlined 속성 세트가 있음을 알게됩니다.

Answer 3

가장 쉬운 방법은 Github Flavored Markdown을 사용하고 기본 인라인 코드를 사용하는 것입니다. _config.yml 파일에

의 파일을 redcarpet로 변경하십시오. 이제 GFM을 사용할 준비가되었습니다.

markdown: redcarpet 

이제 GitHub Markdown을 모두 수행 할 수 있습니다. 다음과 같이 인라인 코드를하려면 :

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

Answer 4

을 다음과 같은 두 가지 기능을 포함 (및) 호출하는 경우 :

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

당신은 .inline를 사용할 수 있습니다.당신의 마크 다운에 connectNext :

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

.connectNext하는 코드 블록 다음과 같은 텍스트가 같은 <p>에서 인라인 될 수 있도록 할 것입니다.