Как получить встроенный код с помощью Jekyll и Pygments?

Я использую Markdown с тегами Liquid, чтобы разметить некоторый код для сайта, сгенерированного Jekyll, и хотел бы включить некоторый код, который является как встроенным (в абзаце), так и окрашенным синтаксисом (с Pygments), но это не так. кажутся работающими.

Разметка

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

приводит к

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

Я бы очень хотел, чтобы выделенный текст не был заключен в <div class='highlight'> или, по крайней мере, чтобы он был <span class='highlight'>.

Использование {% highlight javascript nowrap %} не работает, как предложено в другом месте. (Возможно, это проблема с моей настройкой — Ruby 2.0, Jekyll 0.12.1, pygments.rb 0.3.7?)

Я хочу разместить эту страницу на GitHub, что означает Я не могу полагаться на плагин. Облом, да?

Дополнение: нумерация строк (например, {% highlight javascript linenos %}) также не работает. Мужчина.


jekyll css syntax-highlighting pygments
person lucasrizoli    schedule 28.03.2013    source источник

Ответы (4)


arrow_upward
5
arrow_downward

Самый простой способ сделать это — использовать Github Flavored Markdown и встроенный код по умолчанию.

в файле _config.yml измените уценку на redcarpet. Теперь вы готовы к работе с GFM.

markdown: redcarpet

Теперь вы можете следить за всеми GitHub Markdown. Чтобы сделать встроенный код следующим образом:

Here is some `inline code` in the middle of sencence
person Jeremy Lynch    schedule 14.12.2014
comment
Обычный встроенный код прост. Проблема заключается в том, что встроенный код Pygments выделен синтаксис. - person Six; 30.11.2015

arrow_upward
2
arrow_downward

Вы можете добавить класс CSS к любому объекту, который вы помещаете в сообщение.

Если вы определяете запись CSS следующим образом:

.inlined { display:inline; }

Затем вы можете добавить этот класс к сгенерированному <div>, выполнив следующие действия:

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

Это работает со всеми типами объектов (таблицы, изображения и т. д.). Я не могу проверить это прямо сейчас, но я думаю, что это решит проблему.

Когда вы тестируете его, посмотрите на выходной HTML. Затем вы обнаружите, что ваш <div> теперь имеет установленный атрибут class=inlined.

person felixgaal    schedule 10.11.2013
comment
Downvoter, объясните, почему, чтобы я мог улучшить или исправить свой ответ. - person felixgaal; 13.06.2014

arrow_upward
0
arrow_downward

В чем проблема с div .highlight? Это сделано для того, чтобы сделать подсветку синтаксиса легкой для темы. Чтобы изменить оболочку на диапазон, я уверен, что вам нужно изменить конфигурацию Jekyll.

Linenumbers появляются только в том случае, если у вас есть многострочный фрагмент.

person PeterInvincible    schedule 13.07.2013

arrow_upward
0
arrow_downward

Если вы включите следующие две функции (и вызовите их):

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

person rdshapiro    schedule 10.02.2015