Display Python code on a webpage using highlight.js and jquery

Given this html fragment

<div class="row">

    <div class="col-md-12">

        <pre><code id="sourcecode" class="python">print "Hello World"</code></pre>

    </div>

</div>

I try to change the actual displayed code on the fly, e.g.:

$.ajax({

    type: 'GET',

    url: '/api/1/strategy/source/json/{{ name }}',

    dataType: "json",

    success: function (response) {

        console.log(response);

        $("#sourcecode").textContent = response;

    }

})

Unfortunately it doesn't work. Any hints for me?
(in the console log I see the correct response)

Thomas

edited Nov 16 '18 at 11:43

executable

1,9742924

asked Nov 16 '18 at 10:17

tschm

1,31021932

1

I've no experience with highlight.js, but if you check the docs (highlightjs.org/usage), under "Custom Initialization", it appears you will need to re-run hljs.highlightBlock(block); after editing the #sourcecode element.

– Gary Thomas
Nov 16 '18 at 10:21

It highlights print "Hello World"...

– tschm
Nov 16 '18 at 10:38

add a comment |

Given this html fragment

<div class="row">

    <div class="col-md-12">

        <pre><code id="sourcecode" class="python">print "Hello World"</code></pre>

    </div>

</div>

I try to change the actual displayed code on the fly, e.g.:

$.ajax({

    type: 'GET',

    url: '/api/1/strategy/source/json/{{ name }}',

    dataType: "json",

    success: function (response) {

        console.log(response);

        $("#sourcecode").textContent = response;

    }

})

Unfortunately it doesn't work. Any hints for me?
(in the console log I see the correct response)

Thomas

edited Nov 16 '18 at 11:43

executable

1,9742924

asked Nov 16 '18 at 10:17

tschm

1,31021932

1

I've no experience with highlight.js, but if you check the docs (highlightjs.org/usage), under "Custom Initialization", it appears you will need to re-run hljs.highlightBlock(block); after editing the #sourcecode element.

– Gary Thomas
Nov 16 '18 at 10:21

It highlights print "Hello World"...

– tschm
Nov 16 '18 at 10:38

add a comment |

Given this html fragment

<div class="row">

    <div class="col-md-12">

        <pre><code id="sourcecode" class="python">print "Hello World"</code></pre>

    </div>

</div>

I try to change the actual displayed code on the fly, e.g.:

$.ajax({

    type: 'GET',

    url: '/api/1/strategy/source/json/{{ name }}',

    dataType: "json",

    success: function (response) {

        console.log(response);

        $("#sourcecode").textContent = response;

    }

})

Unfortunately it doesn't work. Any hints for me?
(in the console log I see the correct response)

Thomas

edited Nov 16 '18 at 11:43

executable

1,9742924

asked Nov 16 '18 at 10:17

tschm

1,31021932

Given this html fragment

<div class="row">

    <div class="col-md-12">

        <pre><code id="sourcecode" class="python">print "Hello World"</code></pre>

    </div>

</div>

I try to change the actual displayed code on the fly, e.g.:

$.ajax({

    type: 'GET',

    url: '/api/1/strategy/source/json/{{ name }}',

    dataType: "json",

    success: function (response) {

        console.log(response);

        $("#sourcecode").textContent = response;

    }

})

Unfortunately it doesn't work. Any hints for me?
(in the console log I see the correct response)

Thomas

jquery highlight.js

edited Nov 16 '18 at 11:43

executable

1,9742924

asked Nov 16 '18 at 10:17

tschm

1,31021932

edited Nov 16 '18 at 11:43

executable

1,9742924

asked Nov 16 '18 at 10:17

tschm

1,31021932

edited Nov 16 '18 at 11:43

executable

1,9742924

edited Nov 16 '18 at 11:43

executable

1,9742924

edited Nov 16 '18 at 11:43

executable

1,9742924

asked Nov 16 '18 at 10:17

tschm

1,31021932

asked Nov 16 '18 at 10:17

tschm

1,31021932

asked Nov 16 '18 at 10:17

tschm

1,31021932

1

I've no experience with highlight.js, but if you check the docs (highlightjs.org/usage), under "Custom Initialization", it appears you will need to re-run hljs.highlightBlock(block); after editing the #sourcecode element.

– Gary Thomas
Nov 16 '18 at 10:21

It highlights print "Hello World"...

– tschm
Nov 16 '18 at 10:38

add a comment |

1

I've no experience with highlight.js, but if you check the docs (highlightjs.org/usage), under "Custom Initialization", it appears you will need to re-run hljs.highlightBlock(block); after editing the #sourcecode element.

– Gary Thomas
Nov 16 '18 at 10:21

It highlights print "Hello World"...

– tschm
Nov 16 '18 at 10:38

I've no experience with highlight.js, but if you check the docs (highlightjs.org/usage), under "Custom Initialization", it appears you will need to re-run hljs.highlightBlock(block); after editing the #sourcecode element.

– Gary Thomas
Nov 16 '18 at 10:21

It highlights print "Hello World"...

– tschm
Nov 16 '18 at 10:38

add a comment |

1 Answer
1

active

oldest

votes

Have a look into the below example, specifically the success function inside your $.ajax function.

As long as the response is valid HTML, the h1js code should be working.

<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>

answered Nov 16 '18 at 11:06

Gary Thomas

1,5131416

add a comment |

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53335743%2fdisplay-python-code-on-a-webpage-using-highlight-js-and-jquery%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Have a look into the below example, specifically the success function inside your $.ajax function.

As long as the response is valid HTML, the h1js code should be working.

<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>

answered Nov 16 '18 at 11:06

Gary Thomas

1,5131416

add a comment |

Have a look into the below example, specifically the success function inside your $.ajax function.

As long as the response is valid HTML, the h1js code should be working.

<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>

answered Nov 16 '18 at 11:06

Gary Thomas

1,5131416

add a comment |

Have a look into the below example, specifically the success function inside your $.ajax function.

As long as the response is valid HTML, the h1js code should be working.

<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>

answered Nov 16 '18 at 11:06

Gary Thomas

1,5131416

Have a look into the below example, specifically the success function inside your $.ajax function.

As long as the response is valid HTML, the h1js code should be working.

<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>

<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>

<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>

answered Nov 16 '18 at 11:06

Gary Thomas

1,5131416

answered Nov 16 '18 at 11:06

Gary Thomas

1,5131416

answered Nov 16 '18 at 11:06

Gary Thomas

1,5131416

answered Nov 16 '18 at 11:06

Gary Thomas

1,5131416

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky