Markdown To Templated HTML

Why Use Markdown To Templated HTML?

• An easy way to create documentation or welcome screens for your shortcuts
• No prior knowledge of HTML is needed
• Adds themes and colour to your markdown
• No internet connection in needed for use
• Easy to navigate

What Does Markdown To Templated HTML Do?

Markdown To Templated HTML provides an easy way to make quick HTMLs for your shortcuts. Input some markdown and choose from one of the themes and you will get a HTML that you can put in your shortcut. Don't just limit this to shortcuts, you can also make other things, like notes or journal entries, using the markdown and converting it to a PDF.

How Embed A HTML In A Shortcut

This is extremely easy to do.

1. Paste the code into the shortcut
2. Make rich text from the code
3. Quick look the rich text (this only works for iOS 14+)

Contributing

Feel free to share a theme of your own. Fallow this shortcut to see how you can do this. You will need to have knowledge of CSS and HTML to make a theme.

Contributors

• @PEKKA_SLAYER

---

Themes

All themes are 100% designed by me or my contributors. They all have a dark mode and a light mode. Also, if you look at the code they can be a bit messy because they where put into a dictionary but the colours can be changed decently easily if you know HTML and CSS.

Normal

Normal theme was inspired by another one of the shortcuts I've made. There isn't too much colour but it can fit anything you can throw at it.

• Can choose accent colour
• Lists are regular
• Font is a normal system font
• Accent colour is used all over to tie in the styles

Spear Mint

Spear Mint theme was inspired by my favourite Google Slide theme. The colours are plain or green and most of the objects are "sharp" but the text is curved.

• Google font, Railway
• Lists use -
• Colours are plain black, white and two other shades of green
• Links are red

Spring

If you ask me what theme is the worst, it would have to go with this one. The colours were mostly inspired by the eggs you can get at Easter. * Normal sans-serif font but the titles are a more playful font * Lists use pink ❊ * Colours are mainly pink, yellow and blue * Bolded text is pink

Chocolate

This theme contains lots of chocolate colours. White chocolate, dark chocolate and milk chocolate are all colours in the HTML. This theme could also be called cowboy, because of the font and colours.

• Roboto Slab Google font
• Lists use ➢ or ➣
• Bolded text is brown
• Light brown and brown basically change places from dark mode and light mode

Bumblebee

This theme is inspired by a bee. If you don't have many code or block quotes in the HTML then the light mode will be gray and black only but the dark mode always looks like a bee.

• Playful Comfortaa Google font
• Lists use ❖
• Bolded text is yellow or black
• Dark mode looks better than light mode

Grape

This theme has many shades of pink and purple. It is also the first theme that has a gradient. The block quotes and code blocks in light mode are both gradients and the background in dark mode is a gradient.

• Lato Google font
• Lists use ⦿
• First gradients
• Do not put bold text in block quotes

Total Blue

This theme is packed full of blue colours. Every colour you see will be a shade of blue. The text has a serif font so this theme is good for more serious matters.

• Lora serif Google font
• Lists use →
• All blue colours
• Smaller horizontal rule

Summer Green

This theme contains lots of green. I thought that I should make a green theme after having other colour themes like blue and pink/purple. This is also the first theme to have a dotted border (horizontal rule).

• Libre Baskerville serif Google font
• Lists use ✢
• All green colours
• Dotted horizontal rule

Night Owl By @PEKKA_SLAYER

This is the first theme contributed by someone other than me. It is also the first theme with animations. The animations are on horizontal rules, block quotes and links.

• Acme playful Google font
• Lists use ‣
• Animations
• Blue list colour