Math Note, Texts in HackMD

--- title: Math Note, Texts in HackMD tags: template, theme description: a template in math notes on HackMD. --- {%hackmd iT2WVVycQ8C-NbxjWaSpHA %} # 📝 Math Note, Texts in HackMD Using HackMD with some customizations on the css stuffs, theoreticaly speaking, one can build a fair-looking online math note/textbook. HackMD supports many markdown, basic html, and css syntaxes. The math equations are rendered using MathJax. On the other hand, HackMD also supports embedding other md files. Therefore, there is much customizability in terms of appearances.  ## ⚙️ - Setting up To setup, create a template of custom css styles, and use the following syntax to embed it into your page: `{%hackmd file-tail-address %}`; for the working example used in this page, please visit <a href="https://hackmd.io/@BreadFistSearch/HJciwM-qo/edit">the following link</a>. ## 🥦 - Basic Customization Options Many of the HTML elements can be customized - including background colors, emphasis text (`ctrl`+`I`), strong text (`ctrl`+`B`) styles, hyperreference texts, header underline styles, and the list goes on. For example, **this is a strong text**, *this is an emphasized text*, and this is a hyper reference to a book on probability: <center><p><a href="https://link.springer.com/book/10.1007/978-1-4471-5361-0">Probability Theory: A Comprehensive Course</a> by Achim Klenke.</p></center> ## 🍄 - Customize Built-in Environments - Examples Some built-in environments in markdown or HackMD - such as alert blocks (`:::`), block quotes (`>`), codeblocks (` ``` `), tables - can also be customized. ### ⚠️ - Alert Blocks as Math Blocks If one defines custom `<div>` environments, then math equations inside the `<div>` environments cannot be correctly rendered. However, HackMD has its own native alert blocks environments; these can be customized. For example, we can customize the `:::info`, `:::success` alert blocks into something like the following, which is sufficient for writing mathematical theorems and proofs: :::info <div class="statement-title-container"> <span class="statement-title">Theorem 0.</span><span class="statement-subtitle">(Optional Subtitle for Theorem)</span> </div>  Description of the Theorem. A display style math: $$\int e^{e^{e^x}}e^{e^x}e^x\;\mathrm{d}x=e^{e^{e^x}}+C.$$ Inline math: $n\mu=\sum_ix_i$. ::: :::success <span class="start-of-proof">Proof.</span>This is a proof block. ::: ### 💬 - Quote Style This is an example of a quote. We make it positioned at center with palatino font. > "Fun things are fun." - Yui Hirasawa ### 🧶 - Table Color Scheme For example, one can set tables' default colours: | | Cat | Dog | | :--------: | :--------: | :--------: | | Good? | Yes | Yes | | As Food? | No | Yes | | Broccoli? | No | No | | Calculus? | No | No | ### 💻 - Code Block Text Style We can also make the texts in code blocks to be boldface. For example: 1. Inline code blocks: `console.log("Smile :)")`. 2. Actual code blocks: ```javascript= console.log("Smile :)") ``` ### 😢 - MathJax is Hard to Customize Unfortunately, it seems like since HackMD files does not run the `<scripts>` inside md files, so far there is not much to customize when it comes to the appearance of the equations rendered by MathJax. ### 🗳️ - Remove Weird Right Margin When a note is expected to not have many comments, one might want to remove the right margin of the body element; see [this issue on GitHub](https://github.com/hackmdio/hackmd-io-issues/issues/303). To do so, a quick fix is to add these to your CSS settings: ```css= #doc.comment-enabled.comment-inner { margin-right: 0; } #doc.comment-enabled.comment-open-inner { margin-right: 0; } ``` ## 🐛 - Suggestions and Issues If you spot any additional bugs or want to suggest change to the stylesheet, you can create a PR or an issue to this <a href=https://github.com/ZebraAlgebra/styleSheetHackMD>GitHub Repo</a> <img alt="drawing" width="30" background-color="transparent" src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"/>.