Render HTML/Markdown Text

[fischgeek]

I needed a way to view markdown in a larger font because the built in rendering of rich text in a Quick View or the like was too small.

Screenshot

I also wanted to be able to view dynamic HTML markup. So, I made a quick page that takes HTML markup and plops it on the page. (Dropbox used to render HTML with their public links, but they deprecated that a while ago. Sad day.)

And yes, I did just shove it in a URL parameter. Perhaps some day I won’t be lazy and do something more intelligent, but for now it works.

I have the host page using bootstrap 4 so things will be styled a little nicer without effort. I also made some shorthand markup tags and am currently working on more. If you have other ideas, I’d love to hear them.

Here is some documentation for now until I can get it setup in a more permanent spot.

Summary

Options as URL parameters

t title
html the html markup
bg background color (default white)
fg font color (default black)

Shorthand options

don’t forget to close the tag the same way ex: <btn1></btn1>

BUTTONS

<btn> creates <button type=“button” class=“btn”>
<btn1> creates <button type=“button” class=“btn-primary”>
<btn2> creates <button type=“button” class=“btn-secondary”>
<btns> creates <button type=“button” class=“btn-success”>
<btnd> creates <button type=“button” class=“btn-danger”>
<btnw> creates <button type=“button” class=“btn-warning”>
<btni> creates <button type=“button” class=“btn-info”>
<btnl> creates <button type=“button” class=“btn-light”>
<btndrk> creates <button type=“button” class=“btn-dark”>

TABLES

<t> | <table> creates <table class=“table”>
<tdrk> creates <table class=“table table-dark”>
<tstr> creates <table class=“table table-striped”>
<tdrkstr> creates <table class=‘table table-dark table-striped’>

More to come. Open to suggestions.

Please feel free to use this (responsibly) in your scripts. I will keep an eye on things for now, but I’m also working on Auth0 for creating my own API keys for those that want to use it.

Here’s how it works:

1. Take some Markdown and make rich text from it
2. Make HTML from the rich text
3. Replace any equal signs with [eq]
   Otherwise it throws off the url parameters
4. Pass that output along to my site to be processed
5. Show the web page

Screenshot

Or, take some html and pass it along to the site just the same:

Screenshot

Here are the two example shortcuts:
Markdown to Richtext Example
https://www.icloud.com/shortcuts/8ccaaf519046400ba42116797d157357

HTML Markup Example
https://www.icloud.com/shortcuts/6e4ef472b451446e84f6659517cde9b9

I also made into a “function” of sorts. I like to extract this type of functionality into separate Shortcuts for modularity.

Func RenderHTMLFromMarkdown
https://www.icloud.com/shortcuts/ce995a88c79e46d3a9838127271e6a0b

Func RenderHTML
https://www.icloud.com/shortcuts/3e3fae469b024e3a98d409681f3808ca

Call these “functions” like so:

Screenshot

I really hope someone gets some use out of this. Let me know if you have any questions or issues!

[sylumer]

As an alternative, if you are just looking to increase the overall font size, you could use an on device approach like this.

https://www.icloud.com/shortcuts/0edf3d1a10be4a8b977a07344d051b31

I’m pretty sure that it could be extended to account for HTML where a clash might occur with careful use of a regular expression driven replacement. It could certainly be extended to incorporate whatever CSS you would care to use, and the button/table placeholder replacements could also be replicated using some judicious find and replace lists and loops.

[fischgeek]

Interesting. I’ll grab that link and try it out soon. As a side project, I had fun with this and it’s something I’ve been wanting to do for a while; not just with a phone either; it is going to come in handy for me in the future and I just thought I’d share with the community.

In addition to font sizes, I wanted bootstrap to just be there for me and not have to add a bunch of custom styling. I’ll post an example of what one of my first uses for it was tomorrow.

Thanks.

[fischgeek]

Thanks for your shortcut I can see what you were talking about. But, I still like the idea of having a web page pre loaded with bootstrap and other specific styles that I don’t have to put forth any effort to get something nice looking out of it.

I kinda feel like I’m the only one geeking out about this right now.