CODEWITHSUNDEEP
mathjaxhelpndoc
Ilya Zhukov
Ilya Zhukov

Reputation: 1

How can I configure a copy of my HelpNDoc Default HTML Template to use MathJax?

Using instructions taken from here, I configured copies of "Default CHM Template" and "Single Page HTML Template". I added two strings of code to the head sections of the “topics.pas.htm” and “index.pas.html” files and everything works fine. But it didn’t help with a copy of Default HTML Template.

First I added custom JS using GUI: HTML build options \ Template settings \ Custom JavaScript.

I added custom JScript.

It threw exception and broke the TOC.

Result 1 Result 2

Then I deleted custom JS, edited the “topics.pas.html” file and added the above code to the head section.

I duplicated Default HTML Template

I selected the copy for the build and deleted custom JS

I edited the "head" section of the "topics.pas.html" file + clicked Save and compiled html output files.

As a result the TOC works fine. But I have to manually reload the page to view MathJax equations. I added the button "Show Equations" right before the expressions.

The TOC is fine, but I have to manually reload the page with a link or a button to view equations.

I believe it is possible to do it automatically, and that there is the right way to use MathJax instead of built-in Equations Editor.

Upvotes: 0

Views: 123

Answers (1)

jonjbar
jonjbar

Reputation: 4066

By default, HelpNDoc only runs the custom JavaScript code when the DOM is initially loaded. You can check the generated source code to confirm that:

<!-- Init script -->
<script>
$(function() {
  // Create the app
  var app = new Hnd.App({
    searchEngineMinChars: 3
  });
  // Update translations
  hnd_ut(app);
  // Instanciate imageMapResizer
  imageMapResize();
  // Custom JS
  try{
    // --> CUSTOM JavaScript is here <--
  }
  catch(e){
    console.warn("Exception in custom JavaScript Code:", e);
  }
  // Boot the app
  app.Boot();
});
</script>

The DOM is only loaded once, when the documentation is first accessed: HelpNDoc's default HTML template will not reload the whole DOM when topics are changed, but it will only retrieve the and update the new topic's content.
This means that something can work on the initial topic, but not on others.

To achieve this, you can listen to the following event: app.EVENTS.onTopicChanged = (sUrl) => { /* Custom code run when a new topic is loaded */ }

You can check the source code of the sample page created during Indoition's HelpNDoc review to see how they handed that event: https://www.indoition.com/_demos/helpndoc/Index.html

Upvotes: 1

Related Questions