Automatic line breaks in MathJax when displayed in a modal dialogue box

As part of a math project, I need to display the solution of a problem in a Sweetalert2 modal. However, despite using the following code:

<script type="text/x-mathjax-config"> 
MathJax.Hub.Config({
tex2jax: {
     inlineMath: [['$','$'], ['\\(','\\)']]
},
"HTML-CSS": { 
     linebreaks: { automatic: true }
},
SVG: { 
     linebreaks: { automatic: true } 
}
}); 
</script>

the automatic line break feature is not functioning properly within the Sweetalert2 modal (refer to the image). Is there any solution for this issue?

Best regards, Leon

https://i.sstatic.net/39Y4P.png

javascripthtmlcssmathjaxsweetalert2

Answer №1

It appears that the code you entered is being processed differently than expected by the HTML-CSS and SVG processor, likely due to it being in a Common HTML format. You can try enhancing your configurations with additional settings like:

CommonHTML: { 
  linebreaks: { automatic: true }
}, 
PreviewHTML: { 
  linebreaks: { automatic: true }
}

UPDATE

If desired, you can manually specify the output processor using:

MathJax.Hub.Register.StartupHook("End Jax", function () {
 return MathJax.Hub.setRenderer("HTML-CSS");
});

To explore more options for selecting the correct processor, visit this link.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it necessary to use JS/JQ to trigger PHP form data?

Can PHP files/functions be executed without reloading the page? It can be quite disruptive when developing a chat app and every time you send a message, the entire page refreshes. I attempted to use AJAX but it didn't work. Is it not possible to send ...

javascriptphpjqueryajax

"Enhancing user interaction with Vue.js through the stunning ripple effect on

Is there a way to customize the ripple effect from this source so that it doesn't always have to be a DIV? Here's an example: Currently, when I implement it like this: <ripple class="btn">send</ripple> It works as expected, but as ...

javascripthtmlvue.js

"Taking cues from Instagram's web/desktop design, we have created

When you view someone's instagram page on a desktop or pc, the search bar is designed to float left when clicked, allowing text to be entered for searching. If no text is entered in the search field, the search icon and placeholder return to their ori ...

jqueryhtmlcss

Is there a way to keep my footer fixed to the bottom of the page in Google Chrome?

I recently made some updates to my aging website by adding a footer menu. However, I encountered an issue with the placement of the footer on Google Chrome. It appears too high, overlapping certain elements of the site. I attempted to resolve this problem ...

htmlcssgoogle-chrome

Automatically add shimmer with CSS styling

Is it possible to make the shine effect work automatically (without needing hover) every 5 seconds? http://jsfiddle.net/AntonTrollback/nqQc7/ .icon:after { content: ""; position: absolute; top: -110%; left: -210%; width: 200%; height: 200%; ...

jqueryhtmlcssanimationeffects

Utilize Angular 8 to dynamically populate Input values with data pulled from an API

I need help with setting the input value dynamically using data from my API. Once I click send, I want it to be saved in the database. However, I am struggling to dynamically populate the input field. Can someone guide me on the right approach to achieve t ...

javascriptnode.jsangularangular8

Why does findOneandReplace continue to throw an error stating: "Error: Atomic operators are not allowed in the replacement document"?

I am currently working on a Pokemon Team Builder application with a React front end and an Express back end using MongoDB for the database. After reviewing my TeamSchema, it seems that there are no atomic operators included. Take a look at my TeamSchema b ...

javascriptnode.jsmongodbmongoose

Is there an improved method for toggling animations in CSS using jQuery compared to my current approach?

Looking to create a toggle effect for a dropdown box that appears and disappears when a button is clicked. var clickState = false; $("#show").on("click", function() { if (!clickState) { $(".animated").removeClass("off"); refreshElement($(".an ...

javascriptjquerycssanimation

What is the best way to prevent Firefox from storing the data of a textarea in the local environment?

I have been developing a website locally, and I have noticed that there are numerous <textarea> elements present on the site. One issue I am facing is that whenever I reload the site, the content within the <textarea> remains the same. This pe ...

javascripthtmlfirefoxcaching

Express.js: Defining a base route can cause issues with resolving static files

I'm currently working on a project using express.js and react.js, but I've encountered some issues that I can't seem to find solutions for. I have set up a base directory where the express server is located, and within that, there's a ...

javascriptexpressexpress-router

Looking for visible elements in WebDriverIO?

Currently, I am developing a test suite using WebDriverIO for a website with multiple duplicate elements that are selectively displayed based on user interaction... For example, the site may contain five buttons that each open a tooltip. These tooltips ar ...

javascriptnode.jsseleniumecmascript-6webdriver-io

Is there a way to avoid waiting for both observables to arrive and utilize the data from just one observable within the switchmap function?

The code snippet provided below aims to immediately render the student list without waiting for the second observable. However, once the second observable is received, it should verify that the student is not enrolled in all courses before enabling the but ...

javascriptangularrxjsobservableswitchmap

Is it just me or does Img never work, no matter what the "src" is?

I am implementing Google's React example of a "Complex Grid" (located here) to create a Card-like layout. This is how the code appears: return ( <div className={classes.root}> <Paper className={classes.paper} ...

javascriptreactjsmaterial-ui

The dependency graph of npm modules shows significant differences

I've been exploring the capabilities of the npm-remote-ls package to analyze dependency trees for modules. This tool is installed globally on my system. When I execute Command 1: npm-remote-ls object-assign The tree structure displayed is as follows ...

javascriptnode.jsnpmpackage-managers

A method for displaying both the next and previous steps without relying on a switch case statement

I have an array list as follows: const data = [ { title: 'Title1', }, { title: 'Title2', }, { title: 'Title3', }, { title: 'Title4', ...

javascriptreactjsnext.js

Having trouble adding animation to button element following the application of :after pseudo-element styling

I've been grappling with pseudo elements, but I just can't seem to make a simple button animation work using them. My goal is to have a panel move from bottom to top on hover. Similar to the button found on this page (1st row, 2nd button). From ...

htmlcss

Incorporate AJAX into your Javascript code for ordering

My issue arises when pointOnMap() is executed before xmlPreparer(), even though they are called in the correct order. I suspect this has something to do with the use of AJAX, as parseXML creates the object that pointOnMap() requires to be initialized befor ...

javascriptjqueryajax

Obtain the ID of a YouTube video from an iFrame link using jQuery

Check out this YouTube video: iframe width="560" height="315" src="//www.youtube.com/embed/XbGs_qK2PQA" frameborder="0" allowfullscreen></iframe>` (Hell Yeah! Eminem :P) I only want to extract "XbGs_qK2PQA" from the link provided. Using $(&apo ...

javascriptjqueryhtmliframeyoutube

The horizontal rule element is not displaying

My <hr> element seems to be hidden. This is the HTML code: <div id="line"><hr /></div> And this is the CSS code: hr { border: 0; width: 96%; color: #FFFF00; height: 1px; } #line { float: left; width: 73 ...

htmlcss

Encountering a 500 error while trying to access a different file using the .get()

My current project involves setting up basic Express routing. However, every time I try to fetch data in order to link to a new page on my website, I encounter a 500 error. The main file managing the routing is Index.js. The content of Index.js: var expr ...

javascriptnode.jsexpresshandlebars.js