hljs
Basic usage of hljs, just drop code in the directive.
Note
- Can't work with code contains
hljs tag.
-
Can't preserve whitespaces inside HTML tag. Take a peek at the page source with "show source" on the top-right corner.
-
Limitations above are not applicable when the auto-escape feature is off. With
escape="false" or no-escape.
HTML (ref: ngSelect example)
HTML without auto-escape (ref: ngSelect example)
<!-- setup selection display/input input:text -->
<p class="lead">
selection: <input type="text" ng-model="selection">
</p>
<!-- bind scope.selection to ngSelect model -->
<div class="row example" ng-select="selection">
<div class="col-xs-12">
<!-- five images with number as option value -->
<!-- add "selected" class on option selected -->
<img class="img-polaroid img-circle"
ng-repeat="num in [1, 2, 3, 4, 5] track by $id($index)"
ng-src="http://lorempixel.com/100/100/sports/{{ num }}"
ng-select-option="{{ num }}"
select-class="{'selected': $optSelected}">
</div>
</div>
Django templates (ref: highlight.js demo page)
{% if articles|length %}
{% for article in articles %}
{# Striped table #}
| {{ article|default:"Hi... "|escape }} |
{{ article.date|date:"d.m.Y" }} |
{% endfor %}
{% endif %}
{% comment %}
Comments may be long and
multiline.
{% endcomment %}
CSS (ref: highlight.js demo page)
@media screen and (-webkit-min-device-pixel-ratio: 0) {
body:first-of-type pre::after {
content: 'highlight: ' attr(class);
}
}
@import url('print.css');
@page:right {
margin: 1cm 2cm 1.3cm 4cm;
}
@font-face {
font-family: Chunkfive; src: url('Chunkfive.otf');
}
div.text,
#content,
li[lang=ru] {
font: Tahoma, Chunkfive, sans-serif;
background: url('hatch.png') /* wtf? */; color: #F0F0F0 !important;
width: 100%;
}
JSON (ref: highlight.js demo page)
[
{
"title": "apples",
"count": [12000, 20000],
"description": {"text": "...", "sensitive": false}
},
{
"title": "oranges",
"count": [17500, null],
"description": {"text": "...", "sensitive": false}
}
]