Как выравнить код по левому краю, используя highlightjs?
Использую highlight.js для демонстрации фрагментов кода на сайте, который собираю с помощью Gulp 4.
Фишка в том, что я делаю эти вставки в отдельных html-шаблонах (компонентах), которые цепляют к главной странице index.html с помощью плагина gulp-rigger.
Html-шаблон с кодом вставляется в главную страницу и получаются отступы в виде пробелов слева:
Вспомнил сейчас о проблеме. Забыл сказать, что написал вот такой вот костыль по уничтожению лишних отступов слева при выводе html-текста :)
// HTML output code debugging (crutch) for highlight.js lib
const highlightingBlock = document.querySelector('.someblock pre > code.html');
const highlightingStringsArr = highlightingBlock.innerHTML.split('\n');
let newHighlightingStringsArr = Array();
const regExp = /^\t\t\t/;
highlightingStringsArr.forEach((string) => {
newHighlightingStringsArr.push(string.replace(regExp, ' '));
});
highlightingBlock.textContent = newHighlightingStringsArr.join('\n');
Для фикса отступов в JS нужен не textContent, а innerHTML.
Не знаю правильно это всё, но блин.. кто хочет может написать разработчику gupp-rigger, почему он не учитывает отсутствие необходимости во вложенных шаблонах оставлять контент внутри как он есть (as it is)
Можете отметить как решение :)))
Средний
