Prerequisites for inserting Custom HTML content into WebHelp Classic

The following conditions must be met prior to inserting custom HTML content into WebHelp Classic:

  • Well-Formedness - If the file is not a Well-formed XML document (or fragments are not well-formed), the transformation will fail.

    A common use case is if you want to include several script or link elements. In this case, the XML fragment has multiple root elements and to make it well-formed, you can wrap it in an html element. This element tag will be filtered out and only its children will be copied to the output documents. Similarly, you can wrap your content in head, body, html/head, or html/body elements.

  • Referencing Resources in the XML File - You can include references to local resources (such as JavaScript or CSS files) by using the built-in ${oxygen-webhelp-output-dir} macro to specify their paths relative to the output directory:
    <html>
      <script type="text/javascript" src="${oxygen-webhelp-output-dir}/js/test.js"/>
      <link rel="stylesheet" type="text/css" 
            href="${oxygen-webhelp-output-dir}/css/test.css" />
    </html>
    To copy the referenced resources to the output directory, follow the procedure in: Copying Additional Resources to Output Directory.
  • Referencing Resources in the XML File - You can include references to local resources (such as JavaScript or CSS files) by using the built-in ${oxygen-webhelp-output-dir} macro to specify their paths relative to the output directory:
    <html>
    						<script type="text/javascript" src="${oxygen-webhelp-output-dir}/js/test.js"/>
    						<link rel="stylesheet" type="text/css" 
    						href="${oxygen-webhelp-output-dir}/css/test.css" />
    						</html>

    If you want that the path of your resource to be relative to the templates directory, you can use the ${oxygen-webhelp-template-dir} macro.

    To copy the referenced resources to the output directory, follow the procedure in: Copying Additional Resources to Output Directory.

  • Inline JavaScript or CSS Content - If you want to include inline JavaScript or CSS content in the XML file, it is important to place this content inside an XML comment, as in the following examples:

    JavaScript:

    <script type="text/javascript">
      <!--
      /* Include JavaScript code here. */
    						
      function myFunction() {
        return true;
        }
      -->
    </script> 

    CSS:

    <style>
      <!-- 
      /* Include CSS style rules here. */
    							
      *{
        color:red
      } 
      -->
    </style>