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.
Related
I purchase a static HTML, CSS, JavaScript(jQuery) landing page template and I need to add language to it, it has some animations in text for example
<h2 class="large-title-bold">
<span
class="slider-title-fill slider-tr-delay01"
data-text="Enjoy"
>Enjoy</span
><br />
<span
class="slider-title-fill slider-tr-delay02"
data-text="the Difference &"
>the Difference &</span
><br />
<span
class="slider-title-fill slider-tr-delay03"
data-text="the Luxury!"
>the Luxury!</span
>
</h2>
it's a title which I need to have both English and Turkish lang, what is the best way that I can achieve this?
There are many ways of how to do this. A very simple way is to do it over HTML, CSS and JavaScript (no backend programming language needed).
HTML
You will need to work with lang attribute for every single text.
<h2 class="large-title-bold">
<span class="slider-title-fill slider-tr-delay01" data-text="Enjoy">
<span lang="en">Enjoy</span>
<span lang="fr">Profitez</span>
</span><br />
<span class="slider-title-fill slider-tr-delay02" data-text="the Difference &">
<span lang="en">the Difference &</span>
<span lang="fr">la différence &</span>
</span><br />
<span class="slider-title-fill slider-tr-delay03" data-text="the Luxury!">
<span lang="en">the Luxury!</span>
<span lang="fr">le luxe!</span>
</span>
</h2>
CSS
Hide all elements with lang attributes.
span[lang=en], span[lang=fr] {
display: none
}
JavaScript
Display only the elements with the active language.
const url = new URL(window.location.href);
const lang = url.searchParams.get('lang');
if (lang) {
elements = document.querySelectorAll(`span[lang=${lang}]`);
for (let element of elements) {
element.style.display = 'inherit';
}
}
Your URL should be either example.com?lang=en or example.com?lang=fr
I stumbled across a weird behavior of DOMPurify where data-* attributes get left when sanitizing with the default options, but get stripped out when using the SAFE_FOR_TEMPLATES option. Also, the whole text that contains a template gets stripped out instead of just the template part.
Are these bugs or features? What is the rationale for these?
const dirty = '<span data-foo="bar"> Hello {{ World }} </span>';
console.log(
DOMPurify.sanitize(dirty)
// expected <span data-foo="bar"> Hello {{ World }} </span>
// actual <span data-foo="bar"> Hello {{ World }} </span>
);
console.log(
DOMPurify.sanitize(dirty, { SAFE_FOR_TEMPLATES: true })
// expected <span data-foo="bar"> Hello </span>
// actual <span> </span>
);
<script src="https://unpkg.com/dompurify#2.0.0/dist/purify.min.js"></script>
<article>
<br/><br/>
<div class = "resultats">
<label> Weather : </label>
<img src ="http://openweathermap.org/img/w/{{weather.icon}}.png">
<p> {{ weather.weather[0].description }}</p>
<p>Wind speed (meter/sec): {{ weather.wind.speed }}</p>
<span class="temperature">Temperature (Fahrenheit): {{ ((weather.main.temp) -273.15)*1.8+32 }} </span>
<br/>
<span class="temperatureCelsius">Temperature (Celsius): {{ ((weather.main.temp) -273.15) }} </span>
</div>
<br/><br/>
</article>
This code takes all the information but I don't have an icon result. I think it's the URL link which is not write correctly.
In your component file, declare the icon source string with interpolation:
iconSrc: string = `http://openweathermap.org/img/w/${weather.icon}.png`;
Then use the binding in your template:
<img [src]="iconSrc" />
Also you have an extra space after your src attribute in your image tag and removing that would also solve it.
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>
When I use <h3> tags inside the ngSwitch in my html, the entire thing breaks.
Error: [$compile:ctreq] Controller 'ngSwitch', required by directive 'ngSwitchWhen', can't be found!
If i replace the <h3> tag with a <strong> tag for example then it works.
You can try out the example here: http://jsfiddle.net/Lb8aatyz/1/
Html #1
<div ng-controller="MyCtrl">
<p data-ng-if="::type" data-ng-switch="type">
<span><h3>Account type:</h3></span>
<span data-ng-switch-when="facebook" class="ico-fb inline"></span>
<span data-ng-switch-when="google" class="ico-google inline"></span>
<span data-ng-switch-default="" class="ico-email inline"></span>
<span>{{ type }}</span>
</p>
</div>
Html #2
<div ng-controller="MyCtrl">
<p data-ng-if="::type" data-ng-switch="type">
<span><strong>Account type:</strong></span>
<span data-ng-switch-when="facebook" class="ico-fb inline"></span>
<span data-ng-switch-when="google" class="ico-google inline"></span>
<span data-ng-switch-default="" class="ico-email inline"></span>
<span>{{ type }}</span>
</p>
</div>
It is because the h3, or div inside a p is invalid in any HTML standard. In this case, if you use inspect elements in the browser, you will find the h3 closes p automatically, which makes ngSwitch breaks.
More details here: https://stackoverflow.com/a/4291608/1867608
The solution is here:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div data-ng-if="type" data-ng-switch="type">
<h3>Account Type:</h3>
<span data-ng-switch-when="facebook" class="ico-fb inline"></span>
<span data-ng-switch-when="google" class="ico-google inline"></span>
<span data-ng-switch-default="" class="ico-email inline"></span>
<span>{{ type }}</span>
</div>
</div>
var myApp = angular.module('myApp', []);
myApp.config(function($controllerProvider) {
$controllerProvider.allowGlobals();
});
myApp.controller('MyCtrl', function($scope) {
$scope.type = "email";
});
You can not use block element inside inline tag and there is no need to use :: before type in the ng-if and you can also use ng- instead of data-ng-
It seems like replacing the p tag with div resolves the problem but unfortunately I cannot explain this..
You can not use a block element (h3 tag) inside an inline tag (span).
See this: h1 and the span