One of the problem science writers face is to integrate latex with the website.
WordPress is the most popular CMS, most of the hosting provider support and optimize your website for wordpress. This website is also running on wordpress and hosted on hostinger.
One of the problem which I faced is to integrate latex code into wordpress. The tool for latex I am using is katex which supported most of the latest functions.
Although latex can be rendered by Jetpack also, but overall, I dont like to use the Jetpack as I feel it is a overkill for resources. The other problem is that you have to write your latex code in between shortcodes like below.
$latex.....$
Other plugins also provide the same shortcode functionality, but I am very much habitual of writing inline equations between adding a dollar sign like below.
$....$
Say suppose, I want to write the following line.
The final value of v is equal to square root of 2
For Jetpack or some other plugin, I have to write the following code.
The final value of $latex v$ is equal to $latex \sqrt{2}$
But I want to write the line like this
The final value of $v$ is equal to $\sqrt{2}$
As you see here, whatever math or variable I want to write, I just enclosed them into the dollar sign. See the output for the above line as below.
“The final value of $v$ is equal to $\sqrt{2}$.”
As you see how beautiful this is looking. It is a running text, you don’t have to use any shortcode in this.
For this, I have to add the following code into the header of my website.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js" integrity="sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(document.body, {
// customised options
// • auto-render specific keys, e.g.:
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: false},
{left: '\\(', right: '\\)', display: false},
{left: '\\[', right: '\\]', display: false}
],
// • rendering keys, e.g.:
throwOnError : false
});
});
</script>
This will render the equation into the browser. To include the above code in header, either I have to modify my template files or alternately, I have to add this via some plugin which will add this code into header file for the whole website
I achieved this by using a plugin named WPCode. It is such a nice plugin that I can add anything to the header of my wordpress website. See this testing page for reference. As you can see, now I am able to manage all my latex code very beautifully.
I will write some other day about the step by step with screenshots.