How to insert JS into NextCloud HTML <head>?

💻 Development
1

I’m looking for a method to add JS to NextCloud. There is an abandoned app, but surely it can easily be done by adding a script to the <head> </head>. Where is the head located in the NextCloud repository? FYI my goal is to insert $\LaTeX$ with KaTeX.

2

Hey there!

Welcome to the forum.

Do you want to create your own app that uses KaTeX on done was it so you want to render everything using KaTeX?

I assume, you want to create an app the will insert the library to the Nextcloud server in Adobe way?

Christian

3

Hey Christian,

Thanks for your reply!

I would like to render Talk and Text (in Markdown mode). Our conversations on NC are usually riveting discussions centred around Mathematics, so LaTeX there would be brilliant.
Following this, I thought it might just be easier to include KaTeX in every <head> in my NC instance.

I’d love to hear your ideas.

Best wishes,
Henry

4

I can not really help you. But maybe you can use a Webhook / Bot in Nextcloud Talk instead. You can give the Mathematics to a web service and get an image back.

Bots and webhooks - Nextcloud Talk API documentation

Example: https://latex.codecogs.com/png.latex?E=mc^2

1 Like
5

That’s a good suggestion, and a cool web service, thank you.

Having spoken with you both, I think that perhaps this is better implemented within Talk and Text, rather than at the system level. I will open a Feature Request on Talk.

1 Like
6

Hey,

if you want a quick workaround, you could look at my app that does also include some JS script in the head.

Nevertheless, I fear this might break other stuff so be careful with that approach.

2 Likes
7

I saw this app --delighted to meet the author!

My first language was Python so I’m more than happy to try first, then check if it works after :sweat_smile:

We need to import some code, and add an event listener.
I could (humbly) overwrite your /src/snow.js with the lister. I would need to ask you where to insert the <script src=...> statements. Let me know if you think this approach might work.

For reference, here’s the entire HTML we need:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" integrity="sha384-nB0miv6/jRmo5UMMR1wu3Gz6NLsoTkbqJghGIsx//Rlm+ZU03BU6SQNC66uf4l5+" crossorigin="anonymous">

<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js" integrity="sha384-7zkQWkzuo3B5mTepMUcHkMB5jZaolc2xDwL6VFqjFALcbeS9Ggm/Yr2r3Dy4lfFg" crossorigin="anonymous"></script>

<!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js" integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk" crossorigin="anonymous"
    onload="renderMathInElement(document.body);"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/contrib/mhchem.min.js" integrity="sha512-mxjNw/u1lIsFC09k/unscDRY3ofIYPVFbWkP8slrePcS36ht4d/OZ8rRu5yddB2uiqajhTcLD8+jupOWuYPebg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script defer>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
          delimiters: [
              {left: '$$', right: '$$', display: true},
              {left: '$', right: '$', display: false},
              {left: '\\(', right: '\\)', display: false},
              {left: '\\[', right: '\\]', display: true}
          ],
          throwOnError : false
        });
    })
</script>
8

Bumping this post

9

You will end up writing a nextcloud app. There are tutorials for this online at Develop for Nextcloud: App development tutorials

1 Like