arturadib / strapdown

Instant and elegant Markdown documents in the browser
http://strapdownjs.com
MIT License
2.48k stars 411 forks source link

Work with AsciiMath #71

Open TianBo-Timothy opened 7 years ago

TianBo-Timothy commented 7 years ago

Hi, I am in favor of Markdown and AsciiMath. AsciiMath is another javascript that enables something similar to Markdown that allows me to edit formula with text, see http://asciimath.org/. Unfortunately, strapdown and AsciiMath does not work properly together at the moment.

Currently, I can use AsciiMath only outside of

block, this is not convenient as I also want my text to come with formula. </p> <p>I am not able to propose a solution. However, I will be grateful if strapdown can solve this issue. So that we can use simple text to write documents with formulas.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/obedm503"><img src="https://avatars.githubusercontent.com/u/9118707?v=4" />obedm503</a> commented <strong> 7 years ago</strong> </div> <div class="markdown-body"> <p>This is not really a solution but more an alternative. You could use <a href="https://obedm503.github.io/bootmark/">bootmark</a>. It doesn't require you to use <code>&lt;xmp&gt;</code> or <code>&lt;textarea&gt;</code>, but still adds bootstrap and a bunch of other stuff. Also, it's in active development, unlike strapdown.</p> <p><code>Disclaimer: I am the author of bootmark. ;)</code></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/TianBo-Timothy"><img src="https://avatars.githubusercontent.com/u/16188280?v=4" />TianBo-Timothy</a> commented <strong> 7 years ago</strong> </div> <div class="markdown-body"> <p>Hi,</p> <p>thanks for your suggestion. I tried bootmark this morning. It does not work as expected yet ...</p> <p>What I did is like:</p> <p>&lt;!DOCTYPE html&gt;</p> <html> <head> <title>any tag - document</title> <script src=" https://obedm503.github.io/bootmark/dist/bootmark.bundle.min.js"></script> <script src=" https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_HTMLorMML "></script> </head> <body> <p> The first equation: `E = m c^2` <div id="bootmark"> # First block of Markdown text goes in here </div> <p> The second equation: `E = sum_i m_i c^2` <div id="bootmark"> # Second block of Markdown text goes in here </div> </body> </html> <p>Both equations are shown. But the second block of markdown text is gone after rendering. And there is a navigation bar on the top of the page. Can you give any suggestion to fix it?</p> <p>Best Regards Tian, Bo</p> <p>On Thu, Oct 6, 2016 at 3:53 AM, obedm503 notifications@github.com wrote:</p> <blockquote> <p>This is not really a solution but more an alternative. You could use bootmark <a href="https://obedm503.github.io/bootmark/">https://obedm503.github.io/bootmark/</a>. It doesn't require you to use <xmp> or <textarea>, but still adds bootstrap and a bunch of other stuff. Also, it's in active development, unlike strapdown.</p> <p>Disclaimer: I am the author of bootmark. ;)</p> <p>— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <a href="https://github.com/arturadib/strapdown/issues/71#issuecomment-251848162">https://github.com/arturadib/strapdown/issues/71#issuecomment-251848162</a>, or mute the thread <a href="https://github.com/notifications/unsubscribe-auth/APcDePsgKypxWXJiztU7ut4uPzA6pFnRks5qxFSwgaJpZM4KOgkD">https://github.com/notifications/unsubscribe-auth/APcDePsgKypxWXJiztU7ut4uPzA6pFnRks5qxFSwgaJpZM4KOgkD</a> .</p> </blockquote> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/obedm503"><img src="https://avatars.githubusercontent.com/u/9118707?v=4" />obedm503</a> commented <strong> 7 years ago</strong> </div> <div class="markdown-body"> <p>as of now, bootmark is intended to work with a single block of markdown, and not different segments with other text in between. The good news is that I'm working on a new version that should fix stuff regarding polyfills, and I could fix your issue in there. I really never thought of that use case (several blocks of markdown instead of one), so thanks for bringing that up. It's a great idea.</p> <p>As for the navigation bar, you can disable that through config on the element with markdown. You simply need to add</p> <pre><code>&lt;div id="bootmark" data-html="{ toc: false }"&gt; ...some markdown... &lt;/div&gt;</code></pre> <p>to the element with the id of markdown (<a href="http://stackoverflow.com/questions/7262195/several-elements-with-the-same-id-responding-to-one-css-id-selector">remember that id's have to be unique</a>), or add</p> <pre><code>&lt;bootmark html="{ toc: false }"&gt; ...some markdown... &lt;/bootmark&gt;</code></pre> <p>if your using the <code>&lt;bootmark&gt;</code> element.</p> <p>toc stands for Table Of Contents.</p> <p>Now that the idea came up of having multiple separated chunks of markdown, I might consider changin the requirement from <code>id="bootmark"</code> to <code>class="bootmark"</code> to allow for such a thing.</p> <p>Also, I know that the docs are pretty bad right now, that should also be fixed on the new release.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/TianBo-Timothy"><img src="https://avatars.githubusercontent.com/u/16188280?v=4" />TianBo-Timothy</a> commented <strong> 7 years ago</strong> </div> <div class="markdown-body"> <p>So you will become the first to support AsciiMath along with markdown :)</p> <p>I am also thinking about another approach: can we have some markdown directly for math, e.g.</p> <pre><code class="language-math">E = sum_i m_i c^2</code></pre> <p>then you can figure out a way to use MathJax for further processing. In this way, it will feel more like a native solution.</p> <p>What do you think ?</p> <p>B.R. Tian, Bo</p> <p>On Fri, Oct 7, 2016 at 1:58 AM, obedm503 notifications@github.com wrote:</p> <blockquote> <p>as of now, bootmark is intended to work with a single block of markdown, and not different segments with other text in between. The good news is that I'm working on a new version that should fix stuff regarding polyfills, and I could fix your issue in there. I really never thought of that use case (several blocks of markdown instead of one), so thanks for bringing that up. It's a great idea.</p> <p>As for the navigation bar, you can disable that through config on the element with markdown. You simply need to add</p> <div id="bootmark" data-html="{ toc: false }"> ...some markdown... </div> <p>to the element with the id of markdown (remember that id's have to be unique <a href="http://stackoverflow.com/questions/7262195/several-elements-with-the-same-id-responding-to-one-css-id-selector">http://stackoverflow.com/questions/7262195/several-elements-with-the-same-id-responding-to-one-css-id-selector</a>), or add</p> <bootmark html="{ toc: false }"> ...some markdown... </bootmark> <p>if your using the <bootmark> element.</p> <p>toc stands for Table Of Contents.</p> <p>Now that the idea came up of having multiple separated chunks of markdown, I might consider changin the requirement from id=&quot;bootmark&quot; to class=&quot;bootmark&quot; to allow for such a thing.</p> <p>Also, I know that the docs are pretty bad right now, that should also be fixed on the new release.</p> <p>— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <a href="https://github.com/arturadib/strapdown/issues/71#issuecomment-252120811">https://github.com/arturadib/strapdown/issues/71#issuecomment-252120811</a>, or mute the thread <a href="https://github.com/notifications/unsubscribe-auth/APcDeIH5C-IGElUOpacJgyo7UMrdBYoMks5qxYsPgaJpZM4KOgkD">https://github.com/notifications/unsubscribe-auth/APcDeIH5C-IGElUOpacJgyo7UMrdBYoMks5qxYsPgaJpZM4KOgkD</a> .</p> </blockquote> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/TianBo-Timothy"><img src="https://avatars.githubusercontent.com/u/16188280?v=4" />TianBo-Timothy</a> commented <strong> 7 years ago</strong> </div> <div class="markdown-body"> <p>So you will become the first to support AsciiMath along with markdown :)</p> <p>I am also thinking about another approach: can we have some markdown directly for math, e.g.</p> <pre><code class="language-math">E = sum_i m_i c^2</code></pre> <p>then you can figure out a way to use MathJax for further processing. In this way, it will feel more like a native solution.</p> <p>What do you think ?</p> <p>B.R.</p> <p>On Fri, Oct 7, 2016 at 1:58 AM, obedm503 notifications@github.com wrote:</p> <blockquote> <p>as of now, bootmark is intended to work with a single block of markdown, and not different segments with other text in between. The good news is that I'm working on a new version that should fix stuff regarding polyfills, and I could fix your issue in there. I really never thought of that use case (several blocks of markdown instead of one), so thanks for bringing that up. It's a great idea.</p> <p>As for the navigation bar, you can disable that through config on the element with markdown. You simply need to add</p> <div id="bootmark" data-html="{ toc: false }"> ...some markdown... </div> <p>to the element with the id of markdown (remember that id's have to be unique <a href="http://stackoverflow.com/questions/7262195/several-elements-with-the-same-id-responding-to-one-css-id-selector">http://stackoverflow.com/questions/7262195/several-elements-with-the-same-id-responding-to-one-css-id-selector</a>), or add</p> <bootmark html="{ toc: false }"> ...some markdown... </bootmark> <p>if your using the <bootmark> element.</p> <p>toc stands for Table Of Contents.</p> <p>Now that the idea came up of having multiple separated chunks of markdown, I might consider changin the requirement from id=&quot;bootmark&quot; to class=&quot;bootmark&quot; to allow for such a thing.</p> <p>Also, I know that the docs are pretty bad right now, that should also be fixed on the new release.</p> <p>— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <a href="https://github.com/arturadib/strapdown/issues/71#issuecomment-252120811">https://github.com/arturadib/strapdown/issues/71#issuecomment-252120811</a>, or mute the thread <a href="https://github.com/notifications/unsubscribe-auth/APcDeIH5C-IGElUOpacJgyo7UMrdBYoMks5qxYsPgaJpZM4KOgkD">https://github.com/notifications/unsubscribe-auth/APcDeIH5C-IGElUOpacJgyo7UMrdBYoMks5qxYsPgaJpZM4KOgkD</a> .</p> </blockquote> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/obedm503"><img src="https://avatars.githubusercontent.com/u/9118707?v=4" />obedm503</a> commented <strong> 7 years ago</strong> </div> <div class="markdown-body"> <p>though it would be cool, adding a custom code block language might be overkill. (is it even possible?) You could use normal <code>E = sum_i m_i c^2</code> syntax and disabling prettyprint. (prettyprint might mess up the math.) does asciimath allow for multiline math blocks? something like:</p> <pre><code>` E = sum_i m_i c^2 `</code></pre> <blockquote> <p>I figured out how to use multiple bootmark elements/markdown blocks per page. This is still not on the latest stable release.</p> </blockquote> <p>I'll look into having a custom code block language</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/obedm503"><img src="https://avatars.githubusercontent.com/u/9118707?v=4" />obedm503</a> commented <strong> 7 years ago</strong> </div> <div class="markdown-body"> <p>after digging through MathJax's documentation I couln't find a simple method which would take a string of math and return html. So I looked for alternatives, and the internet gave me <a href="https://khan.github.io/KaTeX/">KaTeX</a>. It does just what I wanted, and is alot faster than mathjax.</p> <p>so, like you suggested, I created an extension for showdown (the parser used by bootmark) that uses katex to convert &quot;latex code&quot; to pretty math.</p> <p>the syntax works like you suggested it should but instead of</p> <pre><code>```math some math here</code></pre> <pre><code> it uses </code></pre> <pre><code class="language-latex">some math here</code></pre> <pre><code> since the "code" is in latex. For a demo of the extension check this https://obedm503.github.io/katex-latex/ that page is built from multiple elements. some with markdown outside and some with markdown inside. Shared config is defined in the `&lt;script&gt;` tag in the head of the document. Shared config is something new to version 0.5.0 of bootmark. if you still need to use asciimath, it seems there are ways to [convert asciimath to latex](http://www.intmath.com/blog/mathematics/katex-with-asciimathml-input-and-mathjax-fallback-9456) which would then be converted by the extension but it's not clear how to accomplish that. I'll look into this tho. TL;DR: katex-latex is a showdown extension for latex math in markdown. MathJax is slow, and KaTeX is fast (really fast compared to mathjax) with the tradeoff of latex instead of asciimath. what do you think of the use of `latex` instead of `math` ?</code></pre> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/TianBo-Timothy"><img src="https://avatars.githubusercontent.com/u/16188280?v=4" />TianBo-Timothy</a> commented <strong> 7 years ago</strong> </div> <div class="markdown-body"> <p>It is certainly cool to be able to use Latex in Markdown. But it’s still better to use AsciiMath. The idea is to save time of writing (time of parsing is not a big issue here)</p> <p>There is a Latex package called asciimth (<a href="https://github.com/judah/asciimath-tex">https://github.com/judah/asciimath-tex</a>). It is old but it works. It use similar syntax to write math. Is it possible to use this package along with KaTeX?</p> <p>From: obedm503 Sent: Monday, October 10, 2016 5:50 AM To: arturadib/strapdown Cc: TianBo-Timothy ; Author Subject: Re: [arturadib/strapdown] Work with AsciiMath (#71)</p> <p>after digging through MathJax's documentation I couln't find a simple method which would take a string of math and return html. So I looked for alternatives, and the internet gave me KaTeX. It does just what I wanted, and is alot faster than mathjax.</p> <p>so, like you suggested, I created an extension for showdown (the parser used by bootmark) that uses katex to convert &quot;latex code&quot; to pretty math.</p> <p>the syntax works like you suggested it should but instead of</p> <pre><code class="language-math">some math here</code></pre> <p>it uses</p> <pre><code class="language-latex">some math here</code></pre> <p>since the &quot;code&quot; is in latex.</p> <p>For a demo of the extension check this <a href="https://obedm503.github.io/katex-latex/">https://obedm503.github.io/katex-latex/</a> that page is built from multiple elements. some with markdown outside and some with markdown inside. Shared config is defined in the <script> tag in the head of the document. Shared config is something new to version 0.5.0 of bootmark.</p> <p>if you still need to use asciimath, it seems there are ways to convert asciimath to latex which would then be converted by the extension but it's not clear how to accomplish that. I'll look into this tho.</p> <p>TL;DR: katex-latex is a showdown extension for latex math in markdown. MathJax is slow, and KaTeX is fast (really fast compared to mathjax) with the tradeoff of latex instead of asciimath.</p> <p>what do you think of the use of latex instead of math ?</p> <p>— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/obedm503"><img src="https://avatars.githubusercontent.com/u/9118707?v=4" />obedm503</a> commented <strong> 7 years ago</strong> </div> <div class="markdown-body"> <p>turns out it wasn't so complex to add asciimath support.</p> <p>check this for an example <a href="https://obedm503.github.io/katex-latex/">https://obedm503.github.io/katex-latex/</a> and it's <a href="https://github.com/obedm503/katex-latex/blob/master/index.html">source</a></p> <p>the example builds the webpage from 2 markdown files (README.md and CHANGELOG.md) and some inline markdown (the second <code>&lt;bootmark&gt;</code> element), uses both the <code>&lt;bootmark&gt;</code> element and a div with <code>class="bootmark"</code>, uses both latex and asciimath, uses a different code prettify theme than the default, and defines global config for all elements to use.</p> <p>It is the finest of bootmark + math examples.</p> <p>Let me know what you think.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/TianBo-Timothy"><img src="https://avatars.githubusercontent.com/u/16188280?v=4" />TianBo-Timothy</a> commented <strong> 7 years ago</strong> </div> <div class="markdown-body"> <p>I just tried out. It’s wonderful! I will definitely tell my friends about this! Thanks!!</p> <p>From: obedm503 Sent: Monday, October 10, 2016 8:14 PM To: arturadib/strapdown Cc: TianBo-Timothy ; Author Subject: Re: [arturadib/strapdown] Work with AsciiMath (#71)</p> <p>turns out it wasn't so complex to add asciimath support.</p> <p>check this for an example <a href="https://obedm503.github.io/katex-latex/">https://obedm503.github.io/katex-latex/</a> and it's source</p> <p>the example builds the webpage from 2 markdown files (README.md and CHANGELOG.md) and some inline markdown (the second <bootmark> element), uses both the <bootmark> element and a div with class=&quot;bootmark&quot;, uses both latex and asciimath, uses a different code prettify theme than the default.</p> <p>It is the finest of bootmark + math examples.</p> <p>Let me know what you think.</p> <p>— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/obedm503"><img src="https://avatars.githubusercontent.com/u/9118707?v=4" />obedm503</a> commented <strong> 7 years ago</strong> </div> <div class="markdown-body"> <p>just glad I could help</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>