Импорт и синтаксическая подсветка кода из внешнего источника

Question

Я не фронтенд-разработчик и часами боролся за то, чтобы highlight.js делал то, что я хочу. Нужно красиво отображать код в блоге. Хорошо, это работает отлично в том, что это делает код, который я публикую в

<pre><code>...</code></pre>

... очень красиво и красочно с выбранным стилем, например, idea.css. У меня есть все стили и highlight.pack.js, готовые к использованию в каталоге.

Но это так грязно, чтобы вставить целую программу между этими тегами! Это более чисто для повторного использования, если код может остаться в своем файле.

Какой самый короткий и самый элегантный способ (без загрузки во все внешние библиотеки, если это возможно) заставить его вытаскивать код из файла python в той же директории myCode.py между этими тегами?

Основная ссылка на эту библиотеку находится здесь.

Answer 1

Я предполагаю, что ваш файл кода для выделения живет на веб-сервере.

1. Импортируйте файл, используя JQuery get,
2. Поместите контент в теги кода.
3. Вызовите соответствующую функцию из hightlight.js, чтобы подсветить код.

Вот некоторый код HTML/JS:

<pre><code></code></pre>
<script type="text/javascript">
  $.get("/myCode.py", function(response) {  //(1)
    $("code").html(response);               //(2)
    $("code").each(function(i, block) {    
    hljs.highlightBlock(block);             //(3)
    });
});
</script>

Обратите внимание, что это предполагает, что есть только один <code> тег на вашей странице. В противном случае шаг 2 должен быть скорректирован.