Изучайте JavaScript на примере. Фрагменты кода, инструкции и руководства. "Попробуй сейчас!"

Если вы когда-либо использовали PrismJS, CodeMirror или любое другое решение для подсветки синтаксиса, вы знаете, что оно добавляет множество зависимостей в зависимости от того, какая языковая поддержка вам нужна. Если вам нужна поддержка HTML, JS и PHP, добавьте как минимум 2 файла JavaScript и 2 файла CSS. Если у вас много статей с областями кода, они быстро складываются и влияют на скорость загрузки страниц.

Я придумал простое решение для стилизации предварительно отформатированного тега <pre> и добавления номеров строк. Этого достаточно для того, что мне нужно, и это 273 байта в сжатом виде (424 байта без сжатия).

Обратите внимание, что содержимое кода можно выбрать, а номера строк — нет, что упрощает копирование кода. Кроме того, он поддерживает несколько предварительно отформатированных областей на одной странице.

Вот основной код JavaScript:

(function() {
    const pre = document.querySelectorAll('pre'),
          pl = pre.length;
for (let i = 0; i < pl; i++) {
        pre[i].innerHTML = `<span class="line-number"></span>${pre[i].innerHTML}`;
        let num = pre[i].innerHTML.split(/\n/).length;
        for (let j = 0; j < num; j++) {
            let line_num = pre[i].getElementsByTagName('span')[0];
            line_num.innerHTML += `<span>${(j + 1)}</span>`;
        }
    }
})();

Приведенный выше код JavaScript разбивает содержимое <pre> построчно и добавляет перед ним номер строки. Я использую макет Flex CSS, чтобы сделать все гибким.

Вот стили CSS:

pre.carbon {
    display: flex;
    background-color: #eee;
    overflow: auto;
    margin: 0 0 1em;
    padding: .5em 1em;
}
pre.carbon code,
pre.carbon .line-number {
    font: normal normal 14px/16px "Cascadia Code", "Courier New", Courier, Monospace;
    color: #000000;
    display: block;
}
pre.carbon .line-number {
    margin: 0 1em 0 -1em;
    border-right: 1px solid #666666;
    text-align: right;
    user-select: none;
}
pre.carbon .line-number span {
    display: block;
    padding: 0 .5em 0 1em;
}

А вот пример HTML:

<pre class="carbon"><code>&lt;div class="example"&gt;
    &lt;span&gt;Lorem ipsum dolor sit amet...&lt;/span&gt;
&lt;/div&gt;</code></pre>
<pre class="carbon"><code>(function() {
    let s = document.createElement('script');
s.src = 'carbon.min.js';
    s.id = 'carbon';
    s.type = 'text/javascript';
    s.async = true;
document.body.appendChild(s);
})();</code></pre>

Теперь посмотрите тот же образец выше в области предварительного форматирования углерода.

Довольно круто, правда?

Найдите дополнительные учебники по JavaScript, фрагменты кода и примеры здесь или учебники по jQuery, фрагменты кода и примеры здесь.

Купи мне кофе, чтобы поддержать мою работу!

Первоначально опубликовано на https://getbutterfly.com 11 мая 2021 г.