HTML редактор

<!doctype html>
<html lang="ru">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ленивая подсветка синтаксиса кода с помощью highlight.js</title>
  <link href="/examples/libs/code-highlighting/css/main.css" rel="stylesheet">
  <script defer src="/examples/libs/code-highlighting/js/main.js"></script>
</head>

<body>

<pre><code class="lang-js">// entries - массив объектов IntersectionObserverEntry, каждый из которых представляет один целевой элемент
// observer - объект Intersection Observer, для которого вызывается функция обратного вызова
const cb = (entries, observer) => {
  // переберём все IntersectionObserverEntry
  entries.forEach(entry => {
    // если цель пересекла root
    if (entry.isIntersecting) {
      // получим целевой элемент
      const target = entry.target;
      // добавим целевой элемент в массив elements
      elements.push(target);
      // прекращаем наблюдение за этим целевым элементом
      observer.unobserve(target);
    }
  });
  // если в массиве elements имеются элементы
  if (elements.length) {
    // если highlight.js подключен к странице
    if (hasLoaded) {
      // то выполним подсветку контента элементов, вызвав для этого функцию highlight
      highlight();
    } else {
      // иначе подключим highlight.js к странице и выполним подсветку элементов, находящихся в массиве elements
      loadCSSandJS();
    }
  }
}</code></pre>

<pre><code class="lang-js">// объявление функции someName
function someName() {
  alert('Вы вызвали функцию someName!');
}
// function – ключевое слово, которое означает, что хотим создать функцию
// someName – имя функции
// () – круглые скобки, внутри которых описываются параметры
// { ... } – тело функции</code></pre>

<pre><code class="hljs lang-js">// объявление функции someName
function someName() {
  alert('Вы вызвали функцию someName!');
}
// function – ключевое слово, которое означает, что хотим создать функцию
// someName – имя функции
// () – круглые скобки, внутри которых описываются параметры
// { ... } – тело функции</code></pre>

</div>

</body>

</html>