Skip to content

Useful Hints

Arne Westphal edited this page Nov 11, 2018 · 5 revisions

Useful hints

Markdown Preview

There is no live preview included in this package yet. It is recommended to use Markdown Preview Plus (MPP) for atom or the included preview of Visual Studio Code. MPP does not support markdown-elearnjs specific syntax extensions but it is useful to get a basic preview of the code in real-time.

PDF does not display script output correctly

When using additional scripts like MathJax, you might want to use a renderDelay for the pdf export. You can check the Conversion Options for more information. If you use a conversion plugin, check it's Wiki for information on pdf settings or conversion options (the Plug-In settings are usually using values in seconds and not ms).

Usage of backslashes \

Wherever you want to use the char \ in a markdown section you need to escape it. The only exception is the usage of \ in blocks which are not processed by this package but copied as they are. These blocks can be HTML or code blocks for example.

Otherwise this means writing \\ will display only one \. As the most common syntax highlighting implies, it will otherwise be interpreted as escape for the following character. Escaping means that you deactivate a characters functionality. This might be used for _ as a char (as \_) to not activate its italic style function.

If you want to use MathJax for example and use functions like \frac{1}{2}, you need to write \\frac{1}{2} in the markdown file. Other elements like an underscore might create italic texts so also escape those like x\_i = y\_i.

Usage of < (lower than) and > (greater than)

Due to the conversion to a HTML file you should always write < and > as their HTML escaped versions. Otherwise it might be converted into incorrect HTML. To do so write &lt; for < and &gt; for >. The editor will most likely automatically highlight the code. There might be more HTML specific escapes. If you encounter a problem with specific symbols, try to lookup possible escapes.

Use Markdown in HTML Elements

When you are inserting specific HTML elements but want to use Markdown in those, you can add a markdown="1" as attribute.

<div class="my-example-class" markdown="1">
  This way you can insert _italic text_ or ![images](images.png).
</div>

Due to Markdowns indent syntax you cannot indent the code in this block.

<div class="my-example-class" markdown="1">
  This will be a code block and _not_ a paragraph with text.
</div>

Also using Markdown in nested elements will need a markdown="1" in each element.

<div class="my-example-class" markdown="1">
  <div class="my-example-class-2" markdown="1">
    This way you can insert _italic text_ or ![images](images.png).
  </div>
</div>

You can check the Showdown.js documentation for further information.

Prevent Markdown Conversion - Unwanted Behavior (e.g. MathJax)

Here methods are described to prevent markdown conversion in specific situations.

Besides the methods described here, check the Syntax Extensions Wiki as it contains a section about prevented Markdown conversion in whole blocks.

Do not be irritated if the fixes will display on GitHub in a different way. Markdown converters tend to have different outputs. This fixes are specifically for the markdown-elearnjs using showdown.js for conversion.

Unwanted Links

This is a text example containing a link to www.google.com.

This is a text example containing a link to www.google.com.

If you do not want the link, you can simply wrap it in a <span> like this:

This is a text example containing a link to <span>www.google.com</span>.

This is a text example containing a link to www.google.com.

Unwanted emphasizing

A word __with__ underscores.

A word with underscores.

If you do not want the with to be bold, you can escape the underscores:

A word \_\_with\_\_ underscores.

A word __with__ underscores.

Using the escape might be necessary when using underscores or similar characters in MathJax. This will also help for words with a line through like this (~~this~~).

Add custom style (.css)

To add your own stylesheet you can use the Custom key described in the Meta Information section. This will be pasted into the HTML file and also be added before rendering a PDF file.

You can also use the CSS Stylesheet setting, described in Conversion, to use a specific file in every .pdf file.

If you want to overwrite specific styles you should check on https://github.com/elb-min-uhh/markdown-elearnjs/tree/master/assets/elearnjs/assets/css for the styles used in the HTML file (which is also used for the PDF export) and additionally on https://github.com/elb-min-uhh/markdown-elearnjs/tree/master/assets/elearnjs/pdfAssets/css for the overwriting styles only used for PDF exports.

Section with custom name

If you use the automatically generated sections feature but want to rename a specific section, you can do so by writing it as follows

|||My Custom Section Name|||
## My Normal Section name <!--no-section-->

This way you deactivate the headings automatic section generation and add your own.

Notice: You should check your section depth settings to select the correct section level in your custom section.