Having some trouble with formatting code and inserting/removing line numbers dynamically. The line numbers appear on the first page load, but disappear after clicking run. They don't show at all on my website. I want to allow users to click a button and toggle line numbers on/off:
<body>
<pre id="pre">
<script type="text/javascript">
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
for (var i = 42; --i >= 0;) {
alert('Hello ' + String(world));
}
}
</script>
<style>
p { color: pink }
b { color: blue }
u { color: "umber" }
</style>
</pre>
<button id="button">My button</button>
</body>
$(document).ready(function(){
$("#button").on("click", function(){
$("#pre").addClass("prettyprint").addClass("linenums").addClass("lang-js");
$("#pre").html(PR.prettyPrintOne($("#pre").html()));
});
});
Thanks!
EDIT: Line number issue different than How to add line numbers to all lines in Google Prettify?. Initially, line numbers show up when manually adding linenums class to pre tag. However, toggling them on/off with jquery doesn't work.