We Keep Coding

HighlightJS not highlighting certain code fragments

I'm using HighlightJS to format code that's being stored in a model's TextField of my Django application.
Here is the template HTML:
<pre>
<code class="{{ compiler.highlight_js_alias }}">{{ compiler.unit_test_boilerplate_code }}</code>
</pre>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css"
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
Example output:
<pre>
<code class="ruby hljs language-ruby">
<span class="hljs-keyword">class</span>
<span class="hljs-title class_">Person</span>
:
<span class="hljs-keyword">def</span>
<span class="hljs-title function_">__init__</span>
(
<span class="hljs-params">
<span class="hljs-variable language_">self</span>, name, age</span>
):
<span class="hljs-variable language_">self</span>
.name = name
<span class="hljs-variable language_">self</span>
.age = age
me = Person(
<span class="hljs-string">"Nathan"</span>
<span class="hljs-number">32</span>
)
print(me.name)
</code>
</pre>
Why are certain fragments not highlighted? Thank you for any advice.

After inspecting the outputted HTML of HighlightJS' own demos, it seems this is expected behavior.

Copy HTML from element, replace text with jQuery, then append to element

I am trying to create portlets on my website which are generated when a user inputs a number and clicks a button.
I have the HTML in a script tag (that way it's invisible). I am able to clone the HTML contents of the script tag and append it to the necessary element without issue. My problem is, I cannot seem to modify the text inside the template before appending it.
This is a super simplified version of what I'd like to do. I'm just trying to get parts of it working properly before building it up more.
Here is the script tag with the template:
var p = $("#tpl_dashboard_portlet").html();
var h = document.createElement('div');
$(h).html(p);
$(h).find('div.m-portlet').data('s', s);
$(h).find('[data-key="number"]').val(s);
$(h).find('[data-key="name"]').val("TEST");
console.log(h);
console.log($(h).html());
console.log(s);
$("div.m-content").append($(h).html());
<script id="tpl_dashboard_portlet" type="text/html">
<!--begin::Portlet-->
<div class="m-portlet">
<div class="m-portlet__head">
<div class="m-portlet__head-caption">
<div class="m-portlet__head-title">
<h3 class="m-portlet__head-text">
<span data-key="number"></span> [<span data-key="name"></span>]
</h3>
</div>
</div>
<div class="m-portlet__head-tools">
<ul class="m-portlet_nav">
<li class="m-portlet__nav-item">
<i class="la la-close"></i>
</li>
</ul>
</div>
</div>
<!--begin::Form-->
<div class="m-portlet__body">
Found! <span data-key="number"></span> [<span data-key="name"></span>]
</div>
</div>
<!--end::Portlet-->
</script>
I'm not sure what I'm doing wrong here. I've tried using .each as well with no luck. Both leave the value of the span tags empty.
(I've removed some of the script, but the variable s does have a value on it)

You have two issues here. Firstly, every time you call $(h) you're creating a new jQuery object from the original template HTML. As such any and all previous changes you made are lost. You need to create the jQuery object from the template HTML once, then make all changes to that object.
Secondly, the span elements you select by data-key attribute do not have value properties to change, you instead need to set their text(). Try this:
var s = 'foo';
var p = $("#tpl_dashboard_portlet").html();
var $h = $('<div />');
$h.html(p);
$h.find('div.m-portlet').data('s', s);
$h.find('[data-key="number"]').text(s);
$h.find('[data-key="name"]').text("TEST");
$("div.m-content").append($h.html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script id="tpl_dashboard_portlet" type="text/html">
<div class="m-portlet">
<div class="m-portlet__head">
<div class="m-portlet__head-caption">
<div class="m-portlet__head-title">
<h3 class="m-portlet__head-text">
<span data-key="number"></span> [<span data-key="name"></span>]
</h3>
</div>
</div>
<div class="m-portlet__head-tools">
<ul class="m-portlet_nav">
<li class="m-portlet__nav-item">
<i class="la la-close"></i>
</li>
</ul>
</div>
</div>
<div class="m-portlet__body">
Found! <span data-key="number"></span> [<span data-key="name"></span>]
</div>
</div>
</script>
<div class="m-content"></div>

In my case only this is working:
var template = $('template').clone(true, true); // Copies all data and events
var $h = $('<div />');
$h.html(template);
$h.find('.input-name').attr('value', "your value here"); // Note: .val("your value here") is not working
$('.list').prepend($h.html());

Find value from data-price in javascript

I am working on project where I need to collect the price value form below div
<div>
<span class="price">
<span data-currency-iso="BDT">৳</span>
<span dir="ltr" data-price="21000">21,000.00</span>
</span>
</div>
I need help to find the solution.

Here is my suggestion to make it understandable what you are looking for
Plain JS
console.log(
document.querySelector("span.price span:last-child").getAttribute("data-price")
);
<div>
<span class="price">
<span data-currency-iso="BDT">৳</span>
<span dir="ltr" data-price="21000">21,000.00</span>
</span>
</div>
jQuery version
console.log(
$("span.price span:last").data("price")
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span class="price">
<span data-currency-iso="BDT">৳</span>
<span dir="ltr" data-price="21000">21,000.00</span>
</span>
</div>
or $("[data-currency-iso]").next().data('price');
or $(".price").find("[data-price]").data('price');

Use jQuery to do stuff like this easily.
Insert into your HTML in the <head></head>:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Then:
$('.price [data-price]').data('price');
It would be better though if you just added a class to your price div and did this:
$('.price-amount').data('price');

I guess you're looking for dataset
The HTMLElement.dataset property allows access, both in reading and
writing mode, to all the custom data attributes (data-*) set on the
element, either in HTML or in the DOM.
var elem = document.querySelector('[data-price]');
console.log(elem.dataset.price);
var elem = document.querySelector('[data-price]');
console.log(elem.dataset.price);
<div>
<span class="price">
<span data-currency-iso="BDT">৳</span>
<span dir="ltr" data-price="21000">21,000.00</span>
</span>
</div>

AngularJS & jQuery - How to find the ID of a child div on a Click event for its parent?

I have code in HTML like:
<div id="edit" ng-click="editFunction($scope)">
<span id="1">
click1
</span>
<span id="2">
click2
</span>
<span id="3">
click3
</span>
<span id="4">
click4
</span>
....
</div>
In controller.js:
myDIV.controller('control',function($scope){
$scope.editFunction($event){
alert($event.target.id);
}
});
When a user clicks on the div tag, he should click on any of the span tags. Using the code we are able to get the div id.
However, I need to know which span is clicked. Meaning, the ID of that span.

By sending $index, you get the number of the element in the current repeat.
So instead of trying to send an event, and then understand from that what span was clicked, just use the tools that angular gives you out of the box.
HTML
<div id="edit">
<span ng-repeat="click in clicks" ng-click="editFunction($index)">
{{ click }}
</span>
</div>
And then in your controller:
myDIV.controller('control',function($scope){
$scope.clicks = [1, 2, 3, 4]; // Fill the array with real data.
$scope.editFunction(index){
alert(index);
}
});

U can use like this
<div id="edit" ng-click="editFunction($event)">
element.target.attributes.id.value

AngularJS - HTML losing scope on template replace in ng-repeat

I have the following code in my html.
<div id="section">
<div new-exercise ng-repeat="section in sections track by $index">
</div>
</div>
<div class="add_exercise add_exercise_btn">
<a class="add_exercise_link" ng-click="addExercise()">
<span>+ Add an Exercise</span>
</a>
</div>
the method addExercise() adds a new element to the variable sections, hence updating the html with another template (represented by directive new-exercise).
i.e.
$scope.addExercise = function(){
$scope.sections.push({
title: "hello",
content: "fsa"
});
}
The directive new-exercise:
.directive('newExercise', function () {
return {
templateUrl: '/templates/exercise-form.html',
replace: true,
}
})
The template exercise-form.html:
<div class="add_exercise" id="add_exercise_form" data-section-id="{{id}}">
<form class="new_section">
<div class="input-box">
<input id="title" type="text" name="title" class="form-control" value="{{section.title}}" ng-model="section.title">
<label for="title">Exercise Name</label>
<span class="help-block"></span>
<span>{{ section.title }}</span>
</div>
</form>
</div>
I expect the template exercise-form.html to update the value inside input to be hello but the scope is empty.
However, if I remove the directive and add the template html under ng-repeat it works as I expect. I feel that the scope is lost due to directive, but not so sure about the exact reason. Can anyone explain me the reason and how to resolve?
Thanks.

Remove the replace: true in your directive.
Corrected directive given below:
.directive('newExercise', function () {
return {
templateUrl: '/templates/exercise-form.html'
}
})