Is there a way to add JavaScript to a dash app's <head></head>?

Dash Python
1

Not sure if this is answered or not. I found that the .js file added to /assets folder is only appended to the footer, while .css files are added to the header. Is it possible to add .js file also to the header of the final site? Thanks.

2

yeah, you can do this by overwriting your app’s “index html”

3

I used the app.index_string and I was able to get my MathJax scripts in the header, but my headers and data still don’t format after MathJax. Either way, it got my scripts in the header, so here’s what that looks like:

app.index_string = '''<!DOCTYPE html>
    <html>
        <head>
            <script type="text/javascript">
                MathJax = {
                    tex: {
                        inlineMath: [['$', '$'], ['\\\\(', '\\\\)']]
                    }
                };
            </script>
            <script type="text/javascript" id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
            {%metas%}
            <title>{%title%}</title>
            {%favicon%}
            {%css%}
        </head>
        <body>
            {%app_entry%}
            <footer>
                {%config%}
                {%scripts%}
                {%renderer%}
            </footer>
        </body>
    </html>
    '''

Does anyone know how to actually format the headers and data with MathJax? I’m using Python.

I tested the HTML code in a separate environment where it seemed like it worked, but I lost all functionality. Maybe it’s the website I’m using that’s preventing Dash’s functionality. Maybe it’s Dash’s functionality that’s preventing MathJax from formatting my data and headers. I don’t know.

4

Hi @gdillon

For figures see:

For text components in Dash you can use dcc.Markdown.

Here is an example app

5

2 posts were split to a new topic: How to use MathJax with Dash AG Grid