Some advice on enhancement in KaTeX display and HTML elements

[szw0407]

This project is quite outstanding. It might be one of the best Markdown editors I have ever seen.

However, while using it for a while, I found a few issues with it, which I wish could be fixed.

This is a sample document:

# Inputing formula in MS Word

If you have installed MS Word, you can input formula in MS Word following the steps below:

As an example you may input the following formula in MS Word:

$$\int_{-\infty}^{+\infty} e^{-x^2} dx = \sqrt{\pi}$$

- Open MS Word
- copy the code below

    ```Tex
    \int_{-\infty}^{+\infty} e^{-x^2} dx = \sqrt{\pi}

• Paste the code in MS Word
• Select the code
• Press Alt + = on your keyboard

You will see the formula code is converted to a formula $\int_{-\infty}^{+\infty} e^{-x^2} dx = \sqrt{\pi}$

This is what I expect to be displayed ( Screenshot from Visual Studio Code):

![image](https://github.com/1943time/bluestone/assets/107471539/c7092725-af2a-4864-8d2c-e72324edc928)

This is what displayed in this editor

![image](https://github.com/1943time/bluestone/assets/107471539/384e7719-3a7f-424d-9fa8-2383c3ad56c3)

Anyway, this is quite an excellent program. Just wish it could be better. Thanks!

[szw0407]

The VS code screenshot of Markdown preview is provided by an extension called Markdown Preview Enhanced. Below is how the markdown code on GitHub is shown:

Inputing formula in MS Word

If you have installed MS Word, you can input formula in MS Word following the steps below:

As an example you may input the following formula in MS Word:

$$\int_{-\infty}^{+\infty} e^{-x^2} dx = \sqrt{\pi}$$

• Open MS Word

• copy the code below

  \int_{-\infty}^{+\infty} e^{-x^2} dx = \sqrt{\pi}

• Paste the code in MS Word

• Select the code

• Press Alt + = on your keyboard

You will see the formula code is converted to a formula $\int_{-\infty}^{+\infty} e^{-x^2} dx = \sqrt{\pi}$

[1943time]

thank you for your question

• Regarding html rendering, the editor currently does not support the rendering of inlineHtml, but it can render block-level html, because I have not found a better editing experience to solve this problem. InlineHtml is usually used in several commonly used formats. It's already built into the editor, you can use inlinecode instead of kbd
• I first added Tex syntax highlighting
• In the next version, I will find a way to solve the rendering problem of inline KaTeX

[szw0407]

Speaking of imlineHTML, although I am quite unfamiliar with your project and code, and unfamiliar with TypeScript, but I am, to some extent, familiar with HTML. I know that adding a new feature can be quite hard and time-consuming, but as far as I have known, in HTML code (copied from MDN, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd):

<p>
  Type the following in the Run dialog: <kbd>cmd</kbd><br />Then click the OK
  button.
</p>

<p>Save the document by pressing <kbd>Ctrl</kbd> + <kbd>S</kbd></p>

The kbd is correctly shown, and no extra work is needed.

I suppose directly putting the line of Markdown code into a <p></p> element will work. And it will work for more elements.

I may give another example:

This sentence has an <u>underlined part</u>

In this app, it will show as

I guess the underline element is widely needed as Markdown does not support it directly.

However, if I input the sentence in another order, firstly input <u>underlined part</u>, then I added This sentence has an before it, the sentence will be shown as:

This is another interesting feature. Perhaps this could be reconsidered.

From my perspective if I were to consider adding inlineHTML feature, I may try rendering the elements in the line after the user finishes editing the line and started a new line. Or perhaps when the tag is closed and the cursor is away from the part, it can be rendered. In fact Obsidian is performing like that.

Anyway, time permitting, I might be able to make some changes in my fork if this features I want are considered unnecessary.

[1943time]

@szw0407 Thank you for your suggestion. I considered the design of inlineHtml when I started this project. I feel that switching symbols back and forth is not a good editing experience. But the scenario you raise does exist.

Would you be acceptable if I added a shortcut for copying markdown source code, such as parsing and converting the html in the copied content into a standard format? Add underline format to floating bar or automatically convert kbd to inlineCode.

InlineHtml has some conflicts with the existing editing methods. If you think rendering and editing inlineHtml is very necessary, I can consider compatibility with this situation in subsequent versions, but there is a certain degree of complexity, which will not come soon. There are a lot of things to consider to avoid bugs.

[1943time]

If you have more ideas for improvement, you can add me on WeChat(hj0508_geek) and submit them

[1943time]

Support for inlineKatex has been added in v0.8.4 For operation details, see https://pb.bluemd.me/official/book/docs/markdown#katex

markdown source code as follows：

# Inputing formula in MS Word

If you have installed MS Word, you can input formula in MS Word following the steps below:

As an example you may input the following formula in MS Word:

$$
\int_{-\infty}^{+\infty} e^{-x^2} dx = \sqrt{\pi}
$$

- Open MS Word
- copy the code below

  ```Tex
  \int_{-\infty}^{+\infty} e^{-x^2} dx = \sqrt{\pi}
  \`\`\`

- Paste the code in MS Word
- Select the code
- Press `Alt` + `=` on your keyboard

You will see the formula code is converted to a formula $\int_{-\infty}^{+\infty} e^{-x^2} dx = \sqrt{\pi}$

inlineHtml is more intrusive to the existing editing mode. I will consider adding it in subsequent versions. Thank you for your understanding.

[1943time]

I'm sorry for taking so long to finally reply to this result. After considering the final outcome, the rendering of inlineHTML is not currently the goal of the editor and may be added in the future. It's very regrettable.