Изучайте 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><div class="example"> <span>Lorem ipsum dolor sit amet...</span> </div></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 г.