'How to print out a very simple math formula that is written by latex using Bootstrap?

I am very new to web development and only want to have a sort of Hello world! statement on an HTML page using latex formula which says 1+1=2. I know Bootstrap has a lot of ready to go contents for different applications but I was wondering if there is any one for rendering a math formula so that I can copy it and add more formula to it?

htmlweblatexmathjax


Solution 1:[1]

Use the following as your format:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<title>Mathedemo</title>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript"
  src="http://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
</head>

<body>
<h2>Minimize the function:</h2>

$$
\min_{x \in \mathbb{R}^n} f(x)
$$

</body>
</html>

Solution 2:[2]

As in the other answer, I suggest you to use a tool for math rendering, independently from Bootstrap (that is anyway great for the layout). Particularly, I suggest to use KaTeX rather than MathJax Instead.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Use Katex 0.11.1</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
</head>

<body>
Lorem ipsum dolor sit amet, 
\(1+1=2\) 
consectetur adipiscing elit, 
\[1+1=2\] 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</body>
</html>

You can use both Bootstrap and KaTeX within the same page, to implement different features: this practice should not be discouraged.

The last part of your question

so that I can copy it and add more formula to it

is not clear to me, but please comment if something is missing!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Akbarali
Solution 2 MattAllegro

Related Questions