9 ms·
Show HN: TeXMe – Self-Rendering Markdown and LaTeX Documents
- ajnin 8y agoThe example is incorrect, it should be e^{i \pi} + 1 = 0
- deleted 8y ago[deleted]
- susam 8y agoWhoops! That was incorrect indeed. A very unfortunate typo because it happens to be a favourite equation of many people, including me. Thank you for reporting this. I have fixed it now.
- ajnin 8y agoIt's probably my favorite as well, I remember learning it in school, the way it brings together e, i and pi, which seemed to live in separate worlds until then, amazed me, it was like discovering the keystone of math.
- mxstbr 8y agoDoes anybody know if a similar thing exists that renders out markdown without LaTeX? That'd be a neat way to quickly create documentation websites for open source projects!
- enriquto 8y agofor simple documents, you can write html directly, is is not a hassle at all.
- dspillett 8y agoOften one use case for markdown is reuse. The same text with markdown might go in code comments or a readme file (staying as plain text with markdown), presented with HTML markup in a browser, converted to a page description format (for instance PDF) for read-only distribution, etc. If you write the document with HTML markup you then lose this flexibility.
- enriquto 8y ago> If you write the document with HTML markup you then lose this flexibility. How so? HTML can be always embedded inside markdown
- dspillett 8y agoBut then you don't have the simplicity of markdown. If you are going to write HTML then I'd use a subset of that and convert to everything else (including markdown if desired).
- acqq 8y agoThe same project has this option, read the readme.
- dspillett 8y agoThe documentation suggests this library has the option to skip the extra mathematical rendering if that is all you need: > Render Markdown Without MathJax > To render Markdown-only content without any mathematical content at all ...
- susam 8y agoYes, TeXMe does it. Here is a minimal example: <!DOCTYPE html> <script>window.texme = { useMathJax: false, protectMath: false }</script> <script src="https://cdn.jsdelivr.net/npm/texme"></script><textarea> ### Atomic Theory Atomic theory is a scientific theory of the nature of matter, which states that matter is composed of discrete units called atoms. It began as a philosophical concept in ancient Greece and entered the scientific mainstream in the early 19th century when discoveries in the field of chemistry showed that matter did indeed behave as if it were made up of atoms. Right now, it requires a few more lines of HTML code to disable MathJax related processing. I am planning to add a simpler mechanism later, so that something like merely appending "?markme" to the TeXMe URL in the <script> tag is enough to set it to Markdown-only mode. If anyone has a better idea regarding this, please let me know or send a pull request.
- tomer_shalev 8y agoDoesn't this solution also loads all the code for rendering math? Maybe a separate, smaller, library would be a better solution.
- susam 8y agoThanks to your suggestion, I have now created a separate, smaller, library named MdMe: https://github.com/susam/mdme https://github.com/susam/mdme. This is a stripped down fork of TeXMe that does not contain any code for MathJax related processing. Here is a minimal example: <!DOCTYPE html><script src="https://cdn.jsdelivr.net/npm/mdme@0.1.0"></script><textarea> # Atomic Theory **Atomic theory** is a scientific theory of the nature of matter, which states that matter is composed of discrete units called *atoms*. This is absolutely fresh--published only a few minutes ago. If you find any issues, please report it. I hope you like this.
- akavel 8y agoMaybe you could do it the other way round now? Adding a ?withmath to url would add math rendering :)
- mrec 8y agoMaybe take a look at Strapdown.js, discussed here 4 months ago. I'm sure there are others too. https://news.ycombinator.com/item?id=17321599 https://news.ycombinator.com/item?id=17321599
- susam 8y agoNow we have https://github.com/susam/mdme https://github.com/susam/mdme too (a stripped down fork of TeXMe), thanks to a suggestion on this thread.
- mrec 8y agoThis looks nice; I'll have a play when I have some time. One thing that's not immediate clear from the examples: how (if at all) are you avoiding Flash-Of-Unstyled-Content on initial load? Might it be better to put the markdown in a <noscript> block rather than (or as well as) a <textarea> when editing isn't required?
- wahern 8y agoMarkdeep - https://casual-effects.com/markdeep/ https://casual-effects.com/markdeep/
- platform 8y agoIs there a chance that the HTML TexMe produces could be rendered via React-Native Text control [1] ? [1]https://facebook.github.io/react-native/docs/text https://facebook.github.io/react-native/docs/text
- andridk 8y agoAs someone who has written a few of LaTeX documents over the years, I'd like to point out that rendering TeX math does not constitute a TeX document at all. What LaTeX truly shines at, is typography. Yet a bunch of people seem to think that it's only a way to write math. This is an interesting project. It just bums me out because I thought it was a TeX distribution for the web. I'd remove "TeX" from the name to avoid confusion.
- nabla9 8y agoIt would be nice to have a option that uses LaTex to render html text in browsers. p.legibility { text-rendering: LaTeX; }
- majewsky 8y agoRendering text is only a small part of typography. A significant part, sure, but not all of it by far. For your consideration, this is the manual for KOMA-Script: https://mirror.las.iastate.edu/tex-archive/macros/latex/contrib/koma-script/doc/scrguien.pdf https://mirror.las.iastate.edu/tex-archive/macros/latex/cont... That's 552 pages worth of typography that only considers page layouting. It doesn't deal with fonts or kerning at all. It's actually a fun read even if just for the author's occasional frustration with how often laymen confidently ignore centuries-old typography rules that exists for a reason.
- M_Bakhtiari 8y agoDoes it say anywhere in that manual why the right margin is supposed to be so narrow? I find it very uncomfortable to read texts with very narrow margins.
- jacobush 8y agoI am now more tempted to and also more scared of LaTex than ever before.
- nabla9 8y agoThe context for the discussion is browser rendering for variable sized screens and user interaction in mind. Centuries-old typography rules can't be applied directly for screens. For paper documents you can already do Markup -> LatTeX -> pdf for good quality documents.
- arendtio 8y agoI think that is pretty cool. The one thing I would wish for is a build tool where I could insert my CSS (or a choose from available themes) and build my version of TeXMe (I have a CSS file already which I use to convert Markdown files to PDF). I mean, yes it is not that complicated, and I might just do it manually, but for wider adoption, it would be cool to have themed versions which do not clutter the Markdown files.
- chrisweekly 8y agoHuh? How do you use CSS to convert MD to PDF?
- arendtio 8y agoWell, not directly. I have a script which converts Markdown to HTML (using Discount; referencing my CSS file and highlight.js for syntax highlighting in code sections) and starts a headless chromium which in turn converts the rendered HTML to a PDF file.
- chrisweekly 8y agoThat sounds a lot more like it. :) Care to share your script?
- arendtio 8y agohttps://www.filedropper.com/markdown2pdf https://www.filedropper.com/markdown2pdf $ sha256sum markdown2pdf.zip 97b9df1091cb29e15b699fe1b87d0de20929abfe5357d9e4db920fb24a76406b markdown2pdf.zip It consists of multiple files (entry point is markdown2pdf.sh) and also supports a flag '-w' to watch the markdown file so you can use an editor to modify it while your PDF viewer (in my case okular) keeps updating the changes. I built it solely for my purpose, so it might not fit your needs (or taste). ;-) Legal: I have no special requirements, so think of it as MIT license, but I included some other files (everything in the directory 'Markdown-Styling' except 'css/app.css' which is my CSS theme) which are available free of charge somewhere on the internet but might have their own licenses and terms of use.
- blattimwind 8y ago> The rendered document demonstrates two interesting features of TeXMe: It also demonstrates documents created this way require code from two different third-party origins to work at all.
- andrepd 8y agoWouldn't it make more sense to compile the markdown and serve the result, rather than having the user render it client-side? Seems very inefficient.
- deleted 8y ago[deleted]
- susam 8y agoPandoc, commonmark.js, and many other tools and libraries can already do that. This project is not trying to address that use case. Instead, this project is attempting to make a Markdown + LaTeX (MathJax) file render itself with minimal additional HTML.
- akavel 8y agoA cool advantage is that one should be able to just write the file by hand in any Markdown (or text) editor on any random PC, and then with this fairly easy to remember one-liner insta-convert it to a pretty document for viewing in a browser. I'd go this far as positing that this could become somewhat of a "standard preamble" for .md files... or at least that it could be an interesting thought experiment to imagine that :) Well done!
- wahern 8y agoThe browser still needs to recognize it as text/html. I use Markdeep (https://casual-effects.com/markdeep/ https://casual-effects.com/markdeep/) and to get Chrome to auto-render locally I need to hard link to a name with a .html extension. Also, it doesn't technically need to be a preamble. Markdeep works by appending similar code to the end, which is much more innocuous when viewing the file outside a browser or when its rendered by other software (e.g. on Github).
- susam 8y ago> Also, it doesn't technically need to be a preamble. For the kind of user input (e.g., code pasted verbatim) I was trying to handle, a preamble was technically necessary, at least a `<textarea>` start tag was necessary at the beginning of the document. For more details about this, please see the comparison of TeXMe vs. Markdeep I have posted here: https://news.ycombinator.com/item?id=18314175 https://news.ycombinator.com/item?id=18314175
- luckylittle 8y agoThere are already tools doing similar thing: https://www.sharelatex.com/ https://www.sharelatex.com/ https://latexbase.com https://latexbase.com https://papeeria.com/ https://papeeria.com/
- foo101 8y agoNone of the tools you mention does anything similar to the tool shared in this post. What similarity do you find apart from the obvious and peripheral similarity that they are all rendering latex? The first and third tools require you to sign up. How exactly do you create a distributable Markdown file there that can be read both in editor as text and viewed as HTML in browser? The second link does not recognize Markdown.
- garganzol 8y agoI'm very grateful you created this. It is going to be a tool #1 in my workflow. The best thing I like is that the resulting document can be printed or saved as a PDF file with web browser printing dialog. Impressive. A sweet spot between HTML, Markdown and LaTeX.
- SagelyGuru 8y agoThis is a godsend to anyone who just wants to publish markdown blogs (with some maths) etc in the simplest possible way on a static website. I know, the proper way is supposed to be to use Jekyll or Hugo or something like that, to compile to raw html on the server side but this is much simpler for the publisher. No configuration and compilation and updating on the server involved. I do not think that the user will notice or begrudge the few milliseconds of processing in his browser. Especially if this could be converted to a WASM module. Any takers?
- bhl 8y agoTwo different approaches: Jekyll is often top-down, start with a theme that you like and make edits to the css and html files until you get something you like. Downside is if you want to make major changes, you’ll have to understand complex code you didn’t write yourself. The approach given by this post is bottom-down; start with some basic css edits. Downside is you may spend enough time customizing that using a Jekyll would have been better. ️
- SagelyGuru 8y agoThat is true. I have used Jekyll but having to study obscure settings files and complex directory structures is not enjoyable when all you really want to do is to get on with writing your blog.
- tdgunes 8y agoCan you explain how different TexMe is than Markdeep?
- wahern 8y agoI'm curious, too, though I suspect the author either wasn't aware of Markdeep or just wanted to scratch their own itch. I use Markdeep for most Markdown content, including Github, as I like being able to compose in my own editor, joe, but be able to quickly see the results before committing without having to explicitly compile anything--just tab into browser and refresh. The "problem" with Markdeep is that it supports so many different features (including LaTeX math typesetting, but also ASCII diagram rendering) that it can be difficult stick to a common subset supported by, e.g., Github.
- susam 8y agoAn important difference between Markdeep and TeXMe is that in Markdeep, the Markdown + LaTeX code goes in the <body> element itself. But in TeXMe, the Markdown + LaTeX code goes in a <textarea> element. This difference, in my opinion, leads to more robust parsing of the input. TeXMe handles some cases fine where Markdeep breaks. For example, this Markdown code breaks in Markdeep: Here is a fenced code block that breaks in Markdeep: ``` print("unusual <string") ``` <!-- Markdeep: --><style class="fallback">body{visibility:hidden;white-space:pre;font-family:monospace}</style> <script src="markdeep.min.js"></script> <script src="https://casual-effects.com/markdeep/latest/markdeep.min.js"></script> <script>window.alreadyProcessedMarkdeep||(document.body.style.visibility="visible")</script> The `<string` in the above code is interpreted as the opening of an HTML start tag by the browser. So what looks like a fragment of Python code to a human ends up being parsed as an HTML tag by the browser that looks like: <string") ```="" <script="" src="markdeep.min.js"> Once the browser has mangled the input like this, there is no way for Markdeep to retrieve the original input entered by the user. Markdeep's answer to this problem is to use HTML entity `>` instead of `<`. But that disrupts the natural flow of taking notes in a text file where we might want to paste verbatim code. TeXMe's answer to this problem is to put the input inside a <textarea> element. So the same example works fine in TeXMe and MdMe: <script src="https://cdn.jsdelivr.net/npm/texme"></script><textarea> Here is a fenced code block that breaks in Markdeep: ``` print("unusual <string") ``` The user input is within <textarea> element, so the entire input can be retrieved verbatim and rendered correctly. This is precisely the reason why I wrote TeXMe. I was writing a lot of documents related to neural networks and I needed to paste code examples without having to bother about substituting special characters with their HTML entities. The other minor difference I see is that Markdeep does not conform to CommonMark. It has several restrictions. For example, Markdeep does not support indented code blocks, two trailling spaces for hard linebreak, intra-word emphasis with asterisk, setext headings with one/two minus/equals characters as underline, and single line blockquote. TeXMe is not opinionated about CommonMark. It just hides math content, invokes commonmark.js to render CommonMark, then unhides math, and invokes MathJax to render math. MdMe is even simpler--it just invokes the commonmark.js processor on load. For example, the following code, although valid Markdown (CommonMark), does not do what we normally expect: H1 == Intra*word* emphasis. > What I cannot create, I do not understand. -- Richard P. Feynman print("hello") Line break <!-- Markdeep: --><style class="fallback">body{visibility:hidden;white-space:pre;font-family:monospace}</style> <script src="markdeep.min.js"></script> <script src="https://casual-effects.com/markdeep/latest/markdeep.min.js"></script> <script>window.alreadyProcessedMarkdeep||(document.body.style.visibility="visible")</script> It works fine with TeXMe or MdMe: <script src="https://cdn.jsdelivr.net/npm/texme"></script><textarea> H1 == Intra*word* emphasis. > What I cannot create, I do not understand. -- Richard P. Feynman print("hello") Line break TeXMe or MdMe is a good choice if you care about conformance to CommonMark and pasting code verbatim in your files but do not need the additional features that Markdeep provides. Markdeep has a very impressive feature set that includes task lists, definition lists, tables, diagrams, syntax highlighting, etc. This makes writing many different types of documents possible in Markdeep. TeXMe and MdMe, on the other hand, take a minimalist approach and focus only on getting the CommonMark and LaTeX (MathJax) rendering right by keeping CommonMark.js and MathJax out of each other's way. By the way, to use MdMe instead of TeXMe, just replace "texme" in the CDN URL with "mdme".
- zzo38computer 8y agoI use Plain TeX for typesetting, and it is good. (I don't use LaTeX. I think Plain TeX is better. And, for making fonts, METAFONT is better.) But to render TeX documents you will need to implement TeX. (You could, however, implement a TeX macro package that you can then use the same input for multiple kind of output.)
- Too 8y agoThis project is just evidence that markdown rendering should be built into the browser.
- c-smile 8y agoBut why? Isn't it better to use something like my https://html-notepad.com https://html-notepad.com where you can just create/edit your document in WYSIWYG and use Markdown as one of input options? (Markdown is coming there). I think that this is the best of two worlds.
- platform 8y agothere are many online services that allow users to 'edit' their content snippets (eg blog posts/etc). So these users are not expected author their content offline. In those cases, having an online editor and an rendering engine that supports something like markdown, is beneficial.