Need help regarding adding packages in tikzjax

[ravirathore]

Hi @artisticat1 ,

As you have worked on tikzjax and added few packages to it, I request your help regarding few things about it :-

1. I compiled tikzjax repository (https://github.com/drgrice1/tikzjax) and successfully ran it (ww-modifications branch).
2. I want to add few packages in it e.g. chemfig etc.

3. For adding new packages, in the 'Options' section, it is mentioned to add packages like this: "Additional packages can be made available by adding a file .json that contains an array of file names needed by the package to the tex_packages directory, and adding the gzipped files in that array to the tex_files directory." 3.1 Does it mean this:

   3.1.1 Create new directory 'tex_packages'
   3.1.2 Create chemfig.json file in it with the content (in array format):
       3.1.2.1 [ "chemfig.sty", "chemfig.tex" ]
   3.1.3 Create tex_files directory with 2 files: chemfig.tex.gz, chemfig.sty.gz
   3.1.4 Execute: npm run build
   3.1.5 Do we also have to include above 2 filenames in the file: tex_files.json ?

Request your help.

Thanks,

[artisticat1]

That part of the readme seems to be outdated.

All you need to do is add the file names "chemfig.sty" and "chemfig.tex" to tex_files.json.

This means when you run npm run build, "chemfig.sty.gz" and "chemfig.tex.gz" will automatically be created inside the tex_files folder.

Hope that helps!

[ravirathore]

@artisticat1

Thanks for the revert. I followed the instructions and compiled it. Thanks.

And, tried to run following code:

<script type="text/tikz" data-show-console="true" data-tex-packages="" data-tex-package='{"chemfig":""}'>

 \chemfig{A-B}

 </script>

But, it gave following errors (in console):

This is e-TeX, Version 3.14159265-2.6 (preloaded format=latex 2021.2.6) tikzjax.js:1 **entering extended mode tikzjax.js:1 (input.tex tikzjax.js:1 LaTeX2e <2020-02-02> patch level 2 tikzjax.js:1 No file input.aux. tikzjax.js:1 ABD: EveryShipout initializing macros tikzjax.js:1 ! Undefined control sequence. tikzjax.js:1 l.3 \chemfig tikzjax.js:1 {A-B} tikzjax.js:1 ? Type to proceed, S to scroll future error messages, tikzjax.js:1 R to run without stopping, Q to run quietly, tikzjax.js:1 I to insert something, E to edit your file, tikzjax.js:1 1 or ... or 9 to ignore the next 1 to 9 tokens of input, tikzjax.js:1 H for help, X to quit. tikzjax.js:1 ? tikzjax.js:1 ! Emergency stop. tikzjax.js:1 l.3 \chemfig tikzjax.js:1 {A-B} tikzjax.js:1 Error: Could not find file input.dvi at Me (run-tex.js:1:412407) at texify (run-tex.js:1:417762)

Please advise, where could be the issue.

Thanks,

[artisticat1]

I don't think you've imported chemfig correctly. Do either of these work?

<script type="text/tikz" data-show-console="true" data-tex-packages="chemfig">
\chemfig{A-B}
</script>

<script type="text/tikz" data-show-console="true" data-tex-packages="chemfig" data-tex-package='{"chemfig":""}'>
\chemfig{A-B}
</script>

[ravirathore]

@artisticat1

Thanks for the revert. I tried both the options above, but received following error:

SyntaxError: Unexpected token c in JSON at position 0 (at tikzjax.js:1:67155) at JSON.parse () at texify (run-tex.js:1:417132) at run-tex.js:1:364644 at Generator.next () at run-tex.js:1:363173 at new Promise () at r (run-tex.js:1:362918) at D (run-tex.js:1:364598) at run-tex.js:1:365716 at t (run-tex.js:1:362721)

Please advise.

Thanks a lot,

[ravirathore]

@artisticat1

Hi, Request your guidance please.

Thanks,

[artisticat1]

I tried both the options above, but received following error:

Yeah, I don't know what's gone wrong here. Sorry! You could try building my fork of tikzjax and running the code

<script type="text/tikz" data-show-console="true">
\usepackage{chemfig}
\begin{document}

\chemfig{A-B}

\end{document}
</script>

instead.

[ravirathore]

@artisticat1

Hi, Thanks for the revert.

I used your build and tried to execute this:

<script type="text/tikz" data-show-console="true">
    \begin{tikzpicture}
          \draw (0,0) circle (1in);
        \end{tikzpicture}

    </script>

I hosted the build on github at https://github.com/ravirathore/newchem3; and used jsdelivr.net to use it in html, like this:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/ravirathore/newchem3/fonts.css">

<script src="https://cdn.jsdelivr.net/gh/ravirathore/newchem3/tikzjax.js"></script>

But, received following errors:

As its not able to find tex.wasm.gz (its there on github though), so is there a need to follow some particular directory structure while uploading on github?

Also, received some Content Security Policy related errors, so had to use following in html file header:

 <meta http-equiv="Content-Security-Policy" content="default-src * ; font-src  'self' data:  ; style-src * ; script-src  'self' 'unsafe-inline' 'unsafe-eval'  https://cdn.jsdelivr.net  http://localhost:8009 ; worker-src  'self' blob: 'unsafe-inline' 'unsafe-eval' https://cdn.jsdelivr.net http://localhost:8009 ; ">

Please advise.

Thanks and Regards,

[artisticat1]

Make sure you're building from my output-single-file branch. This will produce a single output file, tikzjax.js, inside a dist folder. You don't need to include other files such as tex.wasm.gz because I've already bundled them inside tikzjax.js.

Then use

<script type="text/tikz" data-show-console="true">
\usepackage{chemfig}
\begin{document}

\chemfig{A-B}

\end{document}
</script>

. Note that you need to include \begin{document} and \end{document} when using my build!

If you can't build tikzjax.js, I suggest you simply use mine: https://github.com/artisticat1/obsidian-tikzjax/blob/main/tikzjax.js.

[ravirathore]

@artisticat1

Hi,

Thanks for the reply. I used the build from the above link, but received following errors.

Request to please see.

Thanks,

[artisticat1]

Apologies, this error was pointed out and fixed in #11.

Please pull the latest changes in my output-single-file branch and try again. (With these new changes, you should also install fontforge (sudo apt install fontforge).)

[ravirathore]

Thanks. Its working. Great!

Regards,

[ravirathore]

@artisticat1

Thanks a lot for the help!

Regards,