Wednesday, August 17, 2016

Using Latex $ f(x) = \frac{d}{d x}{3x^2} $ and Markdown Styles Ctrl + F in Post Title and Body in Blogger


Include MathJAX for Latex in Blogger:

First go to blogger dashboard $ \rightarrow $ Template $ \rightarrow $ Edit HTML . Next copy and paste the script below in the body section or the head section of the html template.

Having this script in the head may slow down loading other things.
<script src='http://cdn.mathjax.org/mathjax/latest/MathJax.js' type='text/javascript'>
MathJax.Hub.Config({
 extensions: ["tex2jax.js","TeX/AMSmath.js","TeX/AMSsymbols.js"],
 jax: ["input/TeX", "output/HTML-CSS"],
 tex2jax: {
     inlineMath: [ ['$','$'], ["\\(","\\)"] ],
     displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
 },
 "HTML-CSS": { availableFonts: ["TeX"] }
});
</script>


Also add this CSS code if something is not looking right.
.MathJax_Display {
text-align: left !important;
}

Now write latex inside two $ and it should render. Example:
(a+b)^2 = a^2 + 2ab + b^2
Writing the line above inside two dollar signs will render it as $ (a+b)^2 = a^2 + 2ab + b^2 $


Use Custom Markdown Style in Blogger Posts and Title:

I recommend not to use it in post titles as it could render incorrectly and end up requiring changes in the css codes. There is no technique for this one just use inline css style in html tags and they will render.

It is possible to publish from stackedit to blogger, but this technique is for those who want to do it by hand. To style it like markdown go to Stackedit Editor and write whatever you need.

Now right click and bring up chrome inspect tools and select the elements using the selector. Now notice in the right hand corner, it will show the css styles for that element.

Now just copy and paste the code for your tag. Example:
<span style="padding:.1em .6em;border:1px solid rgba(63,63,63,0.25);-webkit-box-shadow:0 1px 0 rgba(63,63,63,0.25)">Ctrl + F</span>

Using the above code will render it as Ctrl + F.


Copying Markdown Style of a Tag:



No comments: