Embedded snippets: Add Markdown preview
<!--IssueSummary start--> <details> <summary> Everyone can contribute. [Help move this issue forward](https://handbook.gitlab.com/handbook/marketing/developer-relations/contributor-success/community-contributors-workflows/#contributor-links) while earning points, leveling up and collecting rewards. </summary> - [Close this issue](https://contributors.gitlab.com/manage-issue?action=close&projectId=278964&issueIid=22433) </details> <!--IssueSummary end--> ### Description Our new embedded snippets feature, available with 10.8, allows to put GitLab snippets on any website. When working with Markdown snippets, one thing that is missing is the option to see the rendered Markdown preview. ![Screen_Shot_2018-05-26_at_10.59.58_PM](/uploads/32f903a2250706321a8ac08bd6b59752/Screen_Shot_2018-05-26_at_10.59.58_PM.png) ### Proposal * Snippets based on Markdown remain to be shown in *source code view* by default, as is * Add option to display snippets based on Markdown *as Preview* * A new button group in the embedded snippet header allows to switch between Source and Preview ("Rendered file"), similar to the file viewer on the [snippet page](https://gitlab.com/akaemmerle/example-project/snippets/1718255) ### Design proposal * Draft by myself, subject to finalize before implementation * New icon SVGs used: `code`, `doc-text` (in place: `doc-code`, `download`) ![embedded-snippet-ui](/uploads/978ffcdd14d78bc09a6c08e9b21e853f/embedded-snippet-ui.png) ### Links / references **Example snippet** * [GitLab Snippet page](https://gitlab.com/akaemmerle/example-project/snippets/1718255) * [Embedded snippet example](https://akaemmerle.gitlab.io/gitlab-testing/) on GitLab Pages cc @haseebeqx
issue