CODEWITHSUNDEEP
htmlweblatexmathjax
Saeed
Saeed

Reputation: 688

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?

Upvotes: 0

Views: 576

Answers (2)

Saeed
Saeed

Reputation: 688

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>

Upvotes: 1

MattAllegro
MattAllegro

Reputation: 7345

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!

Upvotes: 0

Related Questions