Làm cách nào để nhận mã nội tuyến bằng Jekyll và Pygments?

Question

Tôi đang sử dụng Markdown with Liquid tags để đánh dấu một số mã cho trang web do Jekyll tạo và muốn bao gồm một số mã trong cả dòng (trong đoạn văn) và có cú pháp màu (có Pygments), nhưng dường như không hoạt động.

Các đánh dấu

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

kết quả trong

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

tôi sẽ rất giống với văn bản nêu bật không được bọc trong <div class='highlight'>, hoặc ít nhất là có nó là một <span class='highlight'>.

Sử dụng {% highlight javascript nowrap %} không hoạt động, như suggested elsewhere. (Có lẽ đây là một vấn đề với việc thiết lập-mà tôi là Ruby 2.0, Jekyll 0.12.1, pygments.rb 0.3.7?)

Tôi muốn host this page on GitHub, có nghĩa tôi không thể dựa vào một plugin. Rất tiếc, phải không?

Phụ lục: Đánh số dòng (ví dụ: {% highlight javascript linenos %}) dường như không hoạt động. Đàn ông.

Answer 1

Sự cố với div .highlight là gì? Nó được đặt ở đó để làm nổi bật cú pháp dễ dàng với chủ đề. Để thay đổi trình bao bọc thành khoảng thời gian, đặt cược của tôi là bạn thay đổi cấu hình Jekyll.

Vải lanh chỉ xuất hiện khi bạn có đoạn mã nhiều dòng.

Answer 2

Bạn có thể thêm lớp CSS vào bất kỳ đối tượng nào bạn đưa vào bài đăng.

Nếu bạn xác định một mục CSS như thế này:

.inlined { display:inline; } 

Sau đó bạn có thể thêm lớp này đến tạo <div> làm điều này:

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

này làm việc với tất cả các loại của các đối tượng (bảng biểu, hình ảnh, v.v.) Tôi không thể kiểm tra nó ngay bây giờ, nhưng tôi nghĩ rằng điều này sẽ giải quyết vấn đề.

Khi bạn kiểm tra, hãy xem HTML đầu ra. Sau đó, bạn sẽ thấy rằng <div> hiện có tập hợp thuộc tính class=inlined.

Answer 3

Cách dễ nhất để làm điều này là sử dụng Github Flavored Markdown và sử dụng mã nội tuyến mặc định của chúng.

trong tệp _config.yml của bạn, thay đổi markdown của bạn thành redcarpet. Bây giờ bạn đã sẵn sàng để đi với GFM.

markdown: redcarpet 

Bây giờ bạn có thể theo dõi tất cả GitHub Markdown. Để làm được mã nội tuyến như sau:

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

Answer 4

Nếu bạn bao gồm hai chức năng sau (và gọi cho họ):

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

Bạn có thể sử dụng .inline và.connectNext trong Markdown của bạn:

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

.connectNext sẽ làm cho đảm bảo rằng các văn bản sau đây khối mã cũng được inlined trong cùng <p>.