1

I have trouble including JavaScript code in the HTML header generated by tex4ht.

The script I want to include is:

<script type="text/javascript">
  var _gaq = _gaq || [];
  var pluginUrl = 
   '//www.google-analytics.com/plugins/ga/inpage_linkid.js';
  _gaq.push(['_require', 'inpage_linkid', pluginUrl]);
  _gaq.push(['_setAccount', 'UA-45193039-1']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

Can anybody tell me how to do this. The documentation on the 

\JavaScript .....\EndJavaScript

command in the Tex4ht online manual (mn) is not very helpful and gives loads of incomprehensible error messages.

Herman Adèr

Improve this question
3
  • Welcome to TeX.SX! Can you tell us, what you have tried out inclusive the error messages you've got? – Schweinebacke Aug 2 '17 at 13:50
  • I used Miktex to translate my LaTeX code including the TeX4ht package. In the .cfg file I first tried to use \ScriptEnv to make a JavaScript environment. But it fails to generate the script above as a verbatim insertion. Surrounding with \JavaScript...\EndJavaScript – Herman Adèr Aug 2 '17 at 14:32
  • does not work either. – Herman Adèr Aug 2 '17 at 14:33
2

The manual isn't very helpful in this case, it is even misleading, because \JavaScript command isn't defined by default, only when javascript option is used it is defined. But it is quite easy to define your own version:

\Preamble{xhtml}
\begin{document}
  \ScriptCommand{\JavaScript}{\HCode{\Hnewline<script type="text/javascript">\Hnewline}}{\HCode{\Hnewline</script>\Hnewline}}
\JavaScript
var _gaq = _gaq || [];
var pluginUrl = 
  '//www.google-analytics.com/plugins/ga/inpage_linkid.js';
_gaq.push(['_require', 'inpage_linkid', pluginUrl]);
_gaq.push(['_setAccount', 'UA-45193039-1']);
_gaq.push(['_trackPageview']);
(function() {
 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();
\EndJavaScript
\EndPreamble

In this configuration file, \JavaScript command is defined first:

\ScriptCommand{\JavaScript}{\HCode{\Hnewline<script type="text/javascript">\Hnewline}}{\HCode{\Hnewline</script>\Hnewline}}

The \Hnewline commands are used to insert line breaks. The JavaScript code is then inserted without <script ...> tags, because \JavaScript command will take care of this.

One important thing is to place the JavaScript after \begin{document} in the configuration file, this ensures that it is inserted in the HTML header:

<?xml version="1.0" encoding="utf-8" ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<!--http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd-->  
<html xmlns="http://www.w3.org/1999/xhtml"  
> 
<head>  
<script type="text/javascript"> 
var _gaq = _gaq || [];
var pluginUrl =
  '//www.google-analytics.com/plugins/ga/inpage_linkid.js';
_gaq.push(['_require', 'inpage_linkid', pluginUrl]);
_gaq.push(['_setAccount', 'UA-45193039-1']);
_gaq.push(['_trackPageview']);
(function() {
 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();

</script> 
<title>mytitle</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="generator" content="TeX4ht (http://www.tug.org/tex4ht/)" /> 
<meta name="originator" content="TeX4ht (http://www.tug.org/tex4ht/)" /> 
<!-- charset=utf-8,html,xhtml --> 
<meta name="src" content="sample.tex" /> 
<link rel="stylesheet" type="text/css" href="sample.css" /> 
</head><body 
>
Improve this answer
10
  • Thank you very much. I found the same solution. I will also try the javascript option you suggest. – Herman Adèr Aug 4 '17 at 8:37
  • In the original question I made another mistake somewhere else in the config file which accounted for the error messages. Thanks again. Problem solved. – Herman Adèr Aug 4 '17 at 8:40
  • Is there a way to do this so that the JavaScript appears after the MathJax JavaScript? – Rushi May 10 at 21:58
  • @Rushi I would just link to external JS in `\Configure{@/BODY}' or something similar. – michal.h21 May 10 at 22:11
  • @michal.h21 thanks, I will try. I am trying to do a sidebar similar to this, and I am using this configuration to insert macros. The problem is that the macros, when processed by MathJax, result in a bunch of empty and hidden mjx-container html tags that are direct children of <body>. Those throw off the grid layout you use in the documentation. I am now trying a JavaScript to get rid of those, but it needs to load after MathJax. – Rushi May 10 at 22:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.