Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to tell tumblr to stop making changes to the markdown and/or HTML code?

tl;dr: tumblr makes changes to the markdown and HTML code. If you write &lt; into the markdown code and reload it, it will be replaced by < and break things. If you use however the HTML editor and place something like an &, which you might need with mathjax, it will be replaced by &amp; and eventually break your tables/matrices.

How can this be avoided?


I am starting to use tumblr and I added

    <!-- Syntax highlighting -->
    <link rel="stylesheet" href="http://yandex.st/highlightjs/7.2/styles/default.min.css">

    <script src="http://yandex.st/highlightjs/7.2/highlight.min.js">
    </script>

    <script>
        hljs.initHighlightingOnLoad();
    </script>

    <!-- Mathjax LaTeX Mode -->
    <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
    </script>

to be able to use Mathjax and highlightjs. However, the problem is if I use the HTML editor of tumblr and enter this:

$$
\left[
  \begin{array}{cc|c}
    1 & 2 & 3<br>
    4 & 5 & 6
  \end{array}
\right]
$$

</p><pre><code>public class Main {
    public static void main(String[] args) {
        System.out.println(”Hello World!”);
    }       
}
</code></pre></p>

tumblr will always replace the & with &amp; which does not work and results in the matrix being rendered not as I intended it:

enter image description here

Is it somehow possible to get syntax highlighting and mathjax to work?

Another problem appears to be something like:

$$ 
\begin{bmatrix}a & b \\\\\ c & d\end{bmatrix}
$$

If I use this for the markdown editor the matrix gets correctly rendered. However, switching to the HTML editor and editing and saving changes there will remove some backslashes and leave just \\\ which then breaks again the matrix.

Also if I write

<pre><code>
for(x = 0; x &lt; myString.length; x++) {
    // Do stuff
}
</code></pre>

in markdown, save it and reload it.. the &lt; gets replaced by <. Saving it again will break the markdown because < is then interpreted as the opening bracket for another HTML tag.

Can I somehow tell tumblr to not do this?

like image 725
Stefan Falk Avatar asked Apr 11 '16 12:04

Stefan Falk


People also ask

Does Tumblr use Markdown?

You can switch between HTML, rich text, and markdown editing in the menu that shows up. You can set your default text editor from your dashboard settings.

How do you use HTML codes on Tumblr?

Click "Theme" at the top of the Tumblr blog's "Customize" page and a list of possible themes will appear on the page. Click the "Use custom HTML" button located just under those themes. The screen will change to display your blog's current HTML code.

What is Markdown Tumblr?

Markdown is a plain-text editing language optimized for quick writing and easy reading.

How do you Edit HTML on Tumblr posts?

Get Started. Click the name of your blog at the top of the Dashboard or under the list icon at the top. Click “Customize” on the right column. Click “Edit HTML” below the theme thumbnail on the left.


1 Answers

In your head (right before </head>), put this:

<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']],
                           displayMath: [['\\[','\\]'], ['$$','$$']]}});
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

Then, instead of \\, write \\\. For example:

$$
\left[
  \begin{array}{cc|c}
    1 & 2 & 3
    \\\4 & 5 & 6
  \end{array}
\right]
$$

Ultimately, I think you should stop doing your editing in Tumblr itself, as the editor will continue to modify your text and there is no real way to stop this. You could make it change it back (as the header above does to some extent) but within the actual editor it will still be messed up.

I would recommend using an external embeddable editor with custom language-specific syntax highlighting. My personal favorite is hilite.me. I have tested this on Tumblr and can confirm that it works.

There are alternatives to MathJax that may work better on Tumblr. But that was not your question.

I think you are probably going to find yourself very limited by the Tumblr text editor, particularly if you plan to switch between modes (Markdown, HTML, RichText). You can find more discussion here. My best guess is that Tumblr takes control away from the user for LangSec reasons (the keynote talk at Blackhat 2016 was in part about how apparently MySpace got pwnd through LangSec problems because they didn't parse or strip html in posts), and I think at a certain point you just hit a wall that can't be overcome. Since I'm a snarky internet person, I'd recommend you check out platforms which are nicer to coders, such as SVBTL. Or just use GitHub pages and build your own website, like I did (link to site).

I would absolutely recommend considering alternatives to MathJax. See more here. You may be able to embed from Mathematica. In a worst case scenario, you could use MathURL.

Sorry I don't have a solution for you. I really don't think there is a conclusive solution at this point in time. Math editing in Tumblr appears to be intrinsically broken, and you can hack your way around different specific issues but it will still break itself when you switch editors. Good luck.

like image 182
Max von Hippel Avatar answered Oct 03 '22 03:10

Max von Hippel