**Markdown**
# Resources
See the following links to learn about markdown formatting:
- [Markdown Guide](https://www.markdownguide.org/basic-syntax/)
# Features
## Inline Code
Simply wrap the inline code with backticks (`):
~~~~~ text
This is some `inline code`.
~~~~~
produces:
This is some `inline code`.
If you want syntax highlighting in a certain language, do the following:
~~~ html
the main function int main(void) in C.
~~~
produces:
the main function int main(void) in C.
If you have multiple pieces of inline code on the same line, it will erroniously highlight the entire line between the first and last one, so you need to put a newline between them and it will work fine after that.
# Markdeep
[Markdeep](https://casual-effects.com/markdeep/) is amazing because you can write markdown (plus other things like latex and diagrams) like you would normally and simply add a line of code to the bottom of the document and open it in a web browser.
It does some crazy Javascript stuff and formats all of the markdown in html.
You can put html in the document and markdeep will pass it to the browser, add custom CSS, and other things.
It also says on the website that you can run markdeep in html mode so that you can add markdeep to an html document inside `` tags.
I haven't figured out how to do that yet though.
## Table of Contents
To control how the table of contents is displayed, you need to set an obscure javascript option. This is not mentioned anywhere in the demo document, but instead is hidden away on the project page.
There is a markdeep option called `tocStyle` that defaults to `auto`.
This auto table of contents option doesn't generate a table of contents at all if there are not enough sections and subsections.
If there are a larger but still small enough, it will generate a small version of the table of contents.
There are also medium and large versions that it will generate depending on size.
You can explicitly choose one by adding the following line of code to the bottom of your document:
~~~ html
~~~
## Weird Code Transparency
I get this weird feeling from the author. Like the code is all open source and everything, but he doesn't link to the code from the main website, and there is no official github for the project.
There is just a [public mirror](https://github.com/morgan3d/markdeep) that mirrors a private repo?? Why?
## Custom Code Block Styles
It was a nightmare to figure out but I got it working eventually.
I had to include a custom css file using a template from the [highlight.js GitHub](https://github.com/highlightjs/highlight.js/blob/main/src/styles/atom-one-dark.css) and modify it by prepending
.md before each css rule and add some missing classes:
~~~ css linenumbers
.md code {
background-color: #282c34;
color: #abb2bf;
padding: 2px;
}
.md .hljs-tag {
color: #abb2bf;
}
.md pre.tilde,
.md .hljs,
.md .hljs-params {
color: #abb2bf;
background: #282c34;
}
.md .hljs-comment,
.md .hljs-quote {
color: #5c6370;
font-style: italic;
}
~~~
This overwrites the css that is HARDCODED into the markdeep js file...
The .md code
and .md pre.tilde blocks updates the background colors of the inline and regular code blocks respectively.
~~~ C linenumbers
#include
int main() {
char c;
printf("Enter a character: ");
scanf("%c", &c);
// %d displays the integer value of a character
// %c displays the actual character
printf("ASCII value of %c = %d", c, c);
return 0;
}
void insertion_sort(int data[], int length) {
for (int i = 0; i < length; ++i) {
...
}
}
~~~
~~~ python linenumbers
def plot_arrow(x, y, yaw, length=1.0, width=0.5, fc="r", ec="k"):
"""
Plot arrow
"""
if not isinstance(x, float):
for ix, iy, iyaw in zip(x, y, yaw):
plot_arrow(ix, iy, iyaw)
else:
plt.arrow(x, y, length * math.cos(yaw), length * math.sin(yaw),
fc=fc, ec=ec, head_width=width, head_length=width)
plt.plot(x, y)
~~~
# Todo
- figure out how to add custom CSS
- Write introduction
- Do some latex examples