Avoid repetitive style specifications in markdown

Help
1

I’m writing a post in markdown and I’m stuck at the following screenshot

image
image1884×740 176 KB

The stuff in the red rectangle is cumbersome to reproduce if using inline style like:

<div style="text-align: center">
  <code style="background: none">\expandafter</code> 
  <span style="font-size: 130%">&langle;</span>token<sub>e</sub><span style="font-size: 130%">&rangle;</span>
  <span style="font-size: 130%">&langle;</span>token<sub>1</sub><span style="font-size: 130%">&rangle;</span>
</div>

Though the effect is satisfactory, I have lots of token blocks to input. So I’m wondering whether there is some method that can help me reduce the work of repetitive style specifications.

Any hints are appreciated!

2

Try using mathJax. You can use jekyll-spaceship plugin to get mathJax support easily.

3

I’m using katex right now. So I don’t really want to switch to MathJax.

4

Try using a for loop to prevent code repetition. It might not be a recommended way though since there are so many variables involved.

5

Do you mean the for loop provided by Liquid template? Iteration – Liquid template language

6

yes. This should do.

7

OK. I’ll have a try. Thanks!

8

I find it’s not a problem of loop. I need to write something like <token>1</token>, which can automatically convert to <span style="font-size: 130%">&langle;</span>token<sub>1</sub><span style="font-size: 130%">&rangle;</span> for me. Is this possible?

9

You can use the Hugo shortcode style as mentioned here.

10

This is part of the markdown:

<div style="text-align: center">
  <code style="background: none">\expandafter</code> 
  {% include token.html content="e" %}
  {% include token.html content="1" %}
  {% include token.html content="2" %}
  <code style="background: none">...</code>
  {% include token.html content="n" %}
  <code style="background: none">...</code>
</div>

then the following rules describe the execution of `\expandafter`:

1. {% include token.html content="e" %} , the token immediately following `\expandafter`, is saved without expansion.

And this is token.html in _includes folder:

<span style="font-size: 130%;">&langle;</span>token<sub>{{ include.content }}</sub><span style="font-size: 130%;">&rangle;</span>

However, the output is weird:

image
image1940×602 54 KB

The &langle; and &rangle; in div are shown as expected but those in the list have not been converted normally. How to fix this?

11

Now the workaround is to use the unicode character directly in token.html. But I don’t know why the strange bug happens.

12

I am also not sure about this. Seems to be an issue with liquid unable to parse HTML entities as per this comment.

13

Thanks. This is helpful!

1 Like
14

KaTeX supports macro definitions and \verb, so you could avoid repetition by defining (e.g.):

\gdef\tokensub#1{\langle\text{token}_{#1}\rangle}

then embed macro calls in math blocks in Markdown files:

\verb'\expandafter'\ \tokensub{e}\ \tokensub{1}\ \tokensub{2}\\ \ldots \ \tokensub{n}\ \ldots

Inputting the above on the KaTeX home page produces:

image
image812×282 10.7 KB