Как вставить код в статью?

Question

[an_tropa]

Добрый день!
Скажите пожалуйста как реализовать вот такую вставку кастомного кода в статью (см. скриншоты)?

Answer 1

[Rustam Bainazarov]

Используйте вот этот скрипт:
https://highlightjs.org/

Демо со всеми стилями и языками:
https://highlightjs.org/static/demo/

Выбираете нужный, инициализируйте по документации.

Comments

[an_tropa]

Спасибо, то что нужно!

[an_tropa]

Есть проблема с ним, все работает кроме html
При добавлении конструкции (абсолютно любой конструкции)

<strong>какойто текст</strong>

Код выполняется, т.е. тегов не видно, виден только текст, а html выполняется браузером.
Не подскажите как сделать отображение html через highlight&

[Rustam Bainazarov]

an_tropa, последний ответ:
https://stackoverflow.com/questions/22076190/highl...

$('code.html').each(function() {
  var that = $(this);
  // cache the content of 'code'
  var html = that.html().trim();
  that.empty();
  // escape the content
  that.text(html);
});
hljs.initHighlightingOnLoad();

Либо с помощью backend, там для PHP есть тоже вариант.

[Rustam Bainazarov]

an_tropa, нет, лучше первый ответ:

document.querySelectorAll("code.html").forEach(function(element) {
    element.innerHTML = element.innerHTML.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
});

hljs.initHighlightingOnLoad();

[xonar]

Рустам Байназаров, Раз наткнулся на вас и на тему эту, хотел бы уточнить у вас. Плохо ли, когда например нужно сделать слайдер, но для него уже есть готовая библиотека в сети. Плохо ли не самому писать, а использовать чужое? Как новичку посоветуйте. Или лучше изначально писать всё самому, а когда будешь уверенным на 100% в том, что ты такой слайдер сможешь сам написать, то можно и библиотеки юзать?

[Rustam Bainazarov]

xonar, смотрите. Я вот не умею писать слайдер. При этом я могу заработать 1000 долларов на лендинге, где я использую Swiper. Это к вопросу целесообразности и момента получения денег за работу.

Безусловно, вам, как разработчику, нужно уметь делать такие штуки самостоятельно. И лучше начинать учиться их делать как можно ранее. Но не стоит забывать о том, что тот же Swiper писали тысячи часов профессиональные разработчики. Поэтому можно использовать библиотеки, но важно понимать основы, чтобы суметь сделать модификации, если надо. Тот же OZON использует Swiper, кстати.

[xonar]

Рустам Байназаров, Спасибо, понял.