How to add wiki-words to your HTML5 output in MadCap Flare


Would you like to link certain words or phrases to your internal wiki, or perhaps to Wikipedia? Would you like to build your output only once, but still be able differentiate between “internal” and “external” audiences? Keep reading.

The idea 🙂

The idea is to add a span-class to your style sheet, and then highlight the words or phrases you’d like to link to your wiki (or any external source). A javascript then creates hyperlinks based on the content within the <span class=’wiki’> tags. You then enable/disable the javascript by using a server-side include (SSI) statement (if your web-server supports it) that points to a file containing the javascript. If your web-server doesn’t support it, or if you want to try it out locally, you can just include the javascript in the master-page of your output.  You could even use conditions to exclude the javascript from, e.g., external builds.

How to set it up using the master-page approach

  1. Add a span-class called span.Wiki to your style sheet.
  2. Choose any topic, and highlight a few words using the new span style.
  3. Open the master-page you’re using for the output, and add the following javascript to the top of the page:
    window.onload = function (){
    var wikiWord = document.getElementsByClassName(‘Wiki’);
    for (var i = wikiWord.length;i–;){
    var a = document.createElement(‘a’);
    a.href = ‘https://en.wikipedia.org/wiki/&#8217; + wikiWord[i].innerText;
    wikiWord[i].appendChild(a).appendChild(a.previousSibling);
    }
    };
  4. Build your output – and voilà – the highlighted words or phrases are now linked to Wikipedia.
  5. Modify the script to fit your specific needs 🙂

Here’s what the output would look like:

Enjoy! 🙂

Posted in Javascript, MadCap Flare

Leave a comment