Combining ng-bind-html with highlight.js

Question

Combining ng-bind-html with highlight.js

I am currently working on implementing syntax highlighting for all code elements within dynamically added HTML content that will be appended to the existing page using ng-bind-html.

<div ng-repeat="activity in activities">
    <h3>{{activity.title}}</h3>
    <div ng-bind-html="activity.text">
    </div>
</div>

The activity.text variable typically contains content like this:

<p>This is a paragraph with some code following.</p>
<pre><code class="lang-python">
s = "Python syntax highlighting"
print s
</code></pre>
<p>some other HTML elements </p>

Currently, the setup is functional but lacking syntax highlighting. To address this issue, I have implemented highlightjs and angular-highlightjs. The modification made was changing

<div ng-bind-html="activity.text">

to

<div hljs ng-bind-html="activity.text">

. However, there is a challenge encountered with how ng-bind-html and hljs directives interact; the expected syntax highlighting is not applied specifically to code tags (pre code), but rather to the entire HTML content.

Seeking advice on alternative approaches to achieve syntax highlighting for dynamically loaded content.

javascript angularjs syntax-highlighting

Answer 1

Answer №1

After encountering an issue, I successfully resolved it by implementing syntax highlighting on the server side, given that markdown translation was also being performed on the server. My backend setup comprises nodejs with expressjs framework.

To enable highlightjs when fetching activities, I included a query parameter (e.g., GET /activities?hljs=true). For each activity, I utilized the following function (which, although not entirely refined, proved effective):

var cheerio = require('cheerio');
var hljs = require('highlight.js');

// ... express routes ...

var highlightPreCodeElements = function (htmlText) {
  var $ = cheerio.load(htmlText);

   $('pre code').each(function(i, block) {
    if ($(this).attr('class') && $(this).attr('class').slice(0, 4) === 'lang') {
      var indexOfMinus = $(this).attr('class').indexOf('-');
      var language = $(this).attr('class').substr(indexOfMinus + 1);
      $(this).html(hljs.highlight(language, $(this).text()).value);
    }
  });

  return $.html();
};

In this implementation, I leveraged cheerio (npm install cheerio) for jQuery-API functionalities in nodejs and highlight.js (npm install highlight.js).

As for the client side, only the reference to highlightjs style sheets was necessary for proper display.

Answer 2

After encountering an issue, I successfully resolved it by implementing syntax highlighting on the server side, given that markdown translation was also being performed on the server. My backend setup comprises nodejs with expressjs framework.

To enable highlightjs when fetching activities, I included a query parameter (e.g., GET /activities?hljs=true). For each activity, I utilized the following function (which, although not entirely refined, proved effective):

var cheerio = require('cheerio');
var hljs = require('highlight.js');

// ... express routes ...

var highlightPreCodeElements = function (htmlText) {
  var $ = cheerio.load(htmlText);

   $('pre code').each(function(i, block) {
    if ($(this).attr('class') && $(this).attr('class').slice(0, 4) === 'lang') {
      var indexOfMinus = $(this).attr('class').indexOf('-');
      var language = $(this).attr('class').substr(indexOfMinus + 1);
      $(this).html(hljs.highlight(language, $(this).text()).value);
    }
  });

  return $.html();
};

In this implementation, I leveraged cheerio (npm install cheerio) for jQuery-API functionalities in nodejs and highlight.js (npm install highlight.js).

As for the client side, only the reference to highlightjs style sheets was necessary for proper display.

Combining ng-bind-html with highlight.js

Answer №1

Similar questions

Testing a function within a React functional component using jest.spyOn with React Testing Library can be accomplished with the following steps:

Connecting UserIDs with Embedded Documents in Mongoose

Is it possible to launch an Electron application by clicking a run button in the VSCode

What is the method for creating a JavaScript array that closely resembles the provided example?

Navigate within a JSON object using an identifier to extract a particular value associated with that identifier

Having troubles retrieving the selected option with AngularJS

When sending strings through an ajax call, spaces are getting converted to "'+'"

The checkbox is displayed as selected after being clicked in conjunction with another checkbox

The default selection in res.format is not being properly recognized

Encountering a ng-select2 Error with Angular version 4.1.3

Implementing template loading on page load with state in AngularJS

Using JavaScript, append a hidden input field in Yii2 and retrieve it from the controller

How to use the route.navigate() method in Angular 9 to open a URL in a new tab with a query string

Steps for adding a React Class Component into a Modal that is not within the React Tree

What steps need to be taken to set up Node.js to accommodate requests from external sources beyond just localhost?

Using the same bone structure to share skeletons among SkinnedMeshes in Three.JS

Adding static files to your HTML page with node.js

Generating a fresh document in MongoDB using Mongoose, complete with references and assigned ObjectIDs

Refresh information in AngularJS controller

Troubleshooting: Issue with NodeJS Mongoose async function not returning value