Отображение кода Python на веб-странице с использованием highlight.js и jquery

Учитывая этот фрагмент HTML

<div class="row">
    <div class="col-md-12">
        <pre><code id="sourcecode" class="python">print "Hello World"</code></pre>
    </div>
</div>

Я пытаюсь изменить отображаемый код на лету, например:

$.ajax({
    type: 'GET',
    url: '/api/1/strategy/source/json/{{ name }}',
    dataType: "json",
    success: function (response) {
        console.log(response);
        $("#sourcecode").textContent = response;
    }
})

К сожалению, это не работает. Любые намеки для меня? (в логе консоли вижу правильный ответ)

Томас

Источник

1 ответ

Посмотрите на приведенный ниже пример, в частности, функцию успеха внутри вашего $.ajax функция.

Пока ответ является действительным HTML, h1js код должен работать.

<head>

  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>

</head>

<body>

  <div class="row">
    <div class="col-md-12">
      <pre><code id="sourcecode" class="python">print "Hello World"</code></pre>
    </div>
  </div>

  <script>
    hljs.initHighlightingOnLoad();

    $(function() {
      $.ajax({
        type: 'GET',
        url: '/api/1/strategy/source/json/{{ name }}',
        dataType: "json",

        success: function (response) {
          console.log(response);
          $("#sourcecode").html(response);
          $('pre code').each(function(i, block) {
            hljs.highlightBlock(block);
          });
        }
      });
    });
  </script>

</body>

Источник
Другие вопросы по тегам