Meta-editor preview render is broken

[ChristopherRogers1991]

Not sure if this is the right place for meta-editor issues, but figured it was close enough. Feel free to move it if it needs to live somewhere else.

The previews of the card and details page seem to render very inaccurately. As an example, I recreated the hello-world readme, and took screenshots of the preview next to the actual renders in the market palce:

Card:

Detail:

In case it is relevant, I'm using Firefox 63.0 (64 bit) on Ubuntu 18.04.

[penrods]

This is pseudo intentional. The preview was created before the Marketplace existed, and it is not intended to be a pixel perfect preview. Rather, I intended the preview to be representative of a typical view.

We could rework it, but this is a moving target for at least some time. Is it worth making accurate for the moment? Or go for the gist?

[ChristopherRogers1991]

Given it's current level of accuracy, I think it should probably either be fixed or disabled.

When I first started using it, I hadn't seen anything else in the marketplace. Based purely on the preview render, I was working with my README to cut it way down in length and clean things up (e.g. cutting out the markdown that didn't seem to be rendering properly). I was trying to come up with a solution that would work for both the marketplace and for github (see https://github.com/MycroftAI/mycroft-skills/issues/677). At some point I decided I needed to see something in the marketplace, realized everything there was rendering in a much nicer format, and that the cleanup I was in the middle of was not necessary. Then I opened this issue, and now we're here.

Consider every other skill developer going through a similar process (through to creating an issue/reporting in chat) and the amount of time wasted is pretty huge (not everyone will have the same process, and some might be smarter than me and actually look ahead, but it's sure to trip a few people up at least).

If it can't be previewed accurately, it would likely be better to simply link to an example, e.g. link to the raw hello-world README and the hello-world skill in the marketplace. (If you add a query parameter to the market that allows a predefined search, you could also effectively link to the card view).

This would help with your moving target, since the market is the target; linking to something there gives a perfect example of how the sample will render in the market's current format.

Disabling the preview tab may seem extreme, but in my opinion, seeing the inaccurate preview doesn't help much more than seeing nothing. Either way, I'm rolling the dice that what I have will look decent.

[ChristopherRogers1991]

I pasted it on #677, but just because I've got it handy, here's what I currently see when I try to generate my README:

The biggest notes are that the merkdown doesn't render, and things in the sidebar (e.g. the device list) do not render.

In case I've done something wrong, here's a screenshot of the editor:

And the full text that it generates:

# <img src='https://rawgithub.com/FortAwesome/Font-Awesome/master/advanced-options/raw-svg/solid/list-ol.svg' card_color='#9CA7BC' width='50' height='50' style='vertical-align:bottom'/> Routine
Create, run, and schedule lists of Mycroft commands

## About 
Create named rountines, which are lists of Mycroft commands, that can be run by name, and scheduled to run at particular times.

## Short Demo

https://youtu.be/71RwUTnGJbI

​## Examples

### Create a routine
    *User:*    "Create routine"
    *Mycroft:* "What would you like to name it?"
    *User:*    "Morning"
    *Mycroft:* "What is the first task?"
    *User:*    "Turn on the lights."
    *Mycroft:* "What next?"
    *User:*    "Say time to get up."
    *Mycroft:* "What next?"
    *User:*    "Tell me the time."
    *Mycroft:* "What next?"
    *User:*    "Tell me the weather."
    *Mycroft:* "What next?"
    *User:*    "That's all."
    *Mycroft:* "Morning has been created"
    
### Schedule a routine
    *User:*    "Schedule routine morning"
    *Mycroft:* "Which days of the week would you like it to run?"
    *User:*    "Monday Tuesday Wednesday Thursday Friday"
    *Mycroft:* "At what time?"
    *User:*    "7:45 a.m."
    *Mycroft:* "Morning has been schedule"

## Instalation

### MSM

    msm install https://github.com/ChristopherRogers1991/mycroft_routine_skill.git

### Manual install

1. Clone this repo into your third party skills folder (the current default is `/opt/mycroft/skills`; check your global/local mycroft.conf files if you have issues)
  * `cd /opt/mycroft/skills && git clone https://github.com/ChristopherRogers1991/mycroft_routine_skill.git`
2. `cd` into the resulting `mycroft_routine_skill` directory
  * `cd ~/.mycroft/skills/mycroft_routine_skill`
3. If your mycroft instance runs in a virtual environment, activate it
  * `source <mycroft-core>/.venv/bin/activate`
4. Install the required python libraries
  * `pip install -r requirements.txt`

## Configuration

If you'd like to manually edit your routines, look for `~/.mycroft/skills/MycroftRoutineSkill/routines.json`.

The schedules are fed to [APScheduler](https://apscheduler.readthedocs.io/en/v3.5.1/modules/triggers/cron.html)
as a cronstring. Note that in APScheduler cronstrings, days of the week start on Monday, so 0 is Monday, and 6
is Sunday.

The finished file should be valid json. If you have issues, use http://jsonlint.com/ to validate the json.


## Examples 
* "Run routine morning"
* "List routines"
* "Describe routine morning"
* "Disable morning routine"
* "Enable morning routine"
* "Delete morning routine"

## Credits 
@ChristopherRogers1991
@gras64 (German translation)

## Category
**Daily**
IoT
WARNING: You have no Categories selected. Please ensure your Skill is assigned to at least one Category.

## Tags
#automation
#schedule

Also worth noting the warning that I don't have categories... right below my list of categories.

[KathyReid]

Courtesy note to say I've got something in this week's newsletter to see if somebody wants to give us a hand in getting the preview more accurate.