0

This is a general question for any seasoned web developers (I myself am not).. Consider the <script> tags in this snippet of code sample below for an html file

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>QS Sensitivity</title>
        <script type="text/x-mathjax-config" async>MathJax.Hub.Config({menuSettings: {zoom: "Hover", zscale: "125%"}});</script>
        <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML" async></script>

Is it possible to “inline” or “embed” the MathJax library in the standalone HTML file such that the file can be viewed in its entirety offline AND without having a local copy of the library AND without having to access the cdn server? I tried using a js tool called inliner (npm/remy/inliner), which partly worked but I’m having some issues. Does anyone know a way to do this?

asdf
  • 836
  • 1
  • 12
  • 29
  • Why not dump the contents of the .js file between two – justiceorjustus Dec 02 '16 at 20:31
  • @justiceorjustus But its an entire library. not just a single .js file – asdf Dec 02 '16 at 20:34
  • 1
    Have you tried reading [the documentation](http://docs.mathjax.org/en/latest/installation.html)? They have quite extensive info page on how to install and use the library locally. – JJJ Dec 02 '16 at 20:36
  • @JJJ From the original question: "AND without having a local copy of the library" – asdf Dec 02 '16 at 20:37
  • You seem too smart to be asking this question. – dgo Dec 02 '16 at 20:40
  • ...yes? If you download all the files that the library needs, you can copy-paste them inside `` tags in the HTML file. – JJJ Dec 02 '16 at 20:41
  • @JJJ Ok, I can try copy pasting manually. I really don't know jack about JS so i'm still learning. That was my first thought but I don't know the order they should go in (or if that even matters?) – asdf Dec 02 '16 at 20:46
  • @JJJ ok so as i suspected you can't just "copy-paste" them for the exact reason i said earlier. its an entire library and loaded dynamically. Thanks for making it seem so trivial yet you gave a wrong answer – asdf Dec 02 '16 at 21:06

1 Answers1

1

All you'd need to do is put the contents of the remote file in its own script tag:

Code has been removed for brevity:

<script type="text/x-mathjax-config" async>
     MathJax.Hub.Config({menuSettings: {zoom: "Hover", zscale: "125%"}});
</script>

<script>
/*
 *  /MathJax.js
 *
 *  Copyright (c) 2009-2016 The MathJax Consortium
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

    if(document.getElementById&&document.childNodes&&document.createElement){if(!
(window.MathJax&&MathJax.Hub)){if(window.MathJax){window.MathJax=
{AuthorConfig:window.MathJax}}else{window.MathJax=
{}}MathJax.isPacked=true;MathJax.version="2.7.0";MathJax.fileversion="2.7.0";
MathJax.cdnVersion="2.7.0";MathJax.cdnFileVersions={};(function(d)
{var b=window[d];if(!b){b=window[d]={}}var e=[];var c=function(f)
{var {if(f.hasOwnProperty(h))

umentMode<9;MathJax.Hub.msieHTMLCollectionBug=
(document.documentMode<9);if(document.documentMode<10&&!s.params.NoMathPlayer){try{new ActiveXObject("MathPlayer.Factory.1");j.hasMathPlayer=true}catch(m)
{}try{if(j.hasMathPlayer){var r", zscale: "125%"}});

</script>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • 1
    From the docs.. http://docs.mathjax.org/en/latest/configuration.html "Because MathJax starts its configuration process as soon as it is loaded, the configuration script must come before the script tag that loads MathJax.js itself. " – asdf Dec 02 '16 at 20:43
  • Ok, I stand corrected (as I said, I haven't used that library before). But, the answer is still the same. You just need to insert the code into `script` tags. I'll update my answer and swap the scripts back. – Scott Marcus Dec 02 '16 at 20:44
  • This won't actually work because MathJax.js is just the core and almost all components are loaded dynamically. – Peter Krautzberger Dec 02 '16 at 20:48
  • @PeterKrautzberger Understood. Of course, in that case those components would need to be included as well and the paths to them would need to be adjusted. Of course, this is WAY more trouble than it's worth. But another user said that the company has docs on how to make this work offline. – Scott Marcus Dec 02 '16 at 20:51
  • @Scott Marcus Thanks. Ok so say i copy pasted all the files from the mathjax library. Does the order matter? Does it matter that some js files are in separate directories? – asdf Dec 02 '16 at 20:51
  • Copying them together will not work either. MathJax has its own module loading mechanism. Also most components are not needed for most setups. You can find two customized single file builds at https://github.com/pkra/MathJax-single-file – Peter Krautzberger Dec 02 '16 at 20:55
  • @asdf Yes, the order does matter because some files may (and probably do) have dependencies on others. If the files are stored on the server in different directories, then the files themselves have path references to those directories. You would need to sift through the files source code and correct those paths. NOT something I'd want to do. A much better approach to all of this would be using Service Workers (https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers), but this isn't a standard yet. – Scott Marcus Dec 02 '16 at 20:56
  • @PeterKrautzberger Your single file MathML/MathJax is exactly what i needed, thanks so much. Is there anyway to specify the zoom settings as I have done in my original script i.e. `` – asdf Dec 02 '16 at 21:46
  • @asdf just add the configuration before the main script. But as Scott wrote, learning about Serviceworkers is a much better idea. – Peter Krautzberger Dec 03 '16 at 06:41