Return to site

Markdown Viewer Js

broken image


Markdown is a lightweight and easy-to-use syntax for styling all forms of writing on the GitHub platform.

  1. Compiling Markdown into HTML. VS Code integrates with Markdown compilers through the integrated task runner. We can use this to compile.md files into.html files. Let's walk through compiling a simple Markdown document. Step 1: Install a Markdown compiler. For this walkthrough, we use the popular Node.js module, markdown-it.
  2. Building actual projects is a great way to learn React and solidify some of its basic principles. So in this post we will be building a simple Markdown Previewer like what you see in the image above. This will be a simple react app which will contain a textarea for Markdown input and a preview tab where the converted text will appear. If you want to jump right into the code, check out the.
  3. Strapdown is Javascript-based solution that renders the markdown content in the browser, which makes it great for offline-viewing. From their own description: Strapdown.js makes it embarrassingly simple to create elegant Markdown documents.

Preview: Description: MTE.js is a JavaScript library used to render a simple WYSIWYG markdown text editor in the document. How to use it: Include the Font Awesome 4 for the markdown editor icons.

What you will learn:

  • How the Markdown format makes styled collaborative editing easy
  • How Markdown differs from traditional formatting approaches
  • How to use Markdown to format text
  • How to leverage GitHub's automatic Markdown rendering
  • How to apply GitHub's unique Markdown extensions

What is Markdown?

Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like # or *.

You can use Markdown most places around GitHub:

  • Comments in Issues and Pull Requests
  • Files with the .md or .markdown extension

For more information, see 'Writing on GitHub' in the GitHub Help.

Examples

It's very easy to make some words bold and other words italic with Markdown. You can even link to Google!

Syntax guide

Here's an overview of Markdown syntax that you can use anywhere on GitHub.com or in your own text files.

Headers

Emphasis

Lists

Unordered

Ordered

Images

Links

Blockquotes

Inline code

GitHub Flavored Markdown

GitHub.com uses its own version of the Markdown syntax that provides an additional set of useful features, many of which make it easier to work with content on GitHub.com.

Note that some features of GitHub Flavored Markdown are only available in the descriptions and comments of Issues and Pull Requests. These include @mentions as well as references to SHA-1 hashes, Issues, and Pull Requests. Task Lists are also available in Gist comments and in Gist Markdown files.

Syntax highlighting

Here's an example of how you can use syntax highlighting with GitHub Flavored Markdown:

You can also simply indent your code by four spaces:

Here's an example of Python code without syntax highlighting: Screenshot editor 2 3 3d.

Download

Task Lists

If you include a task list in the first comment of an Issue, you will get a handy progress indicator in your issue list. It also works in Pull Requests!

Tables

You can create tables by assembling a list of words and dividing them with hyphens - (for the first row), and then separating each column with a pipe |:

Would become:

First HeaderSecond Header
Content from cell 1Content from cell 2
Content in the first columnContent in the second column

SHA references

Clockwork 1 0 – a time bending puzzle platformer game. Any reference to a commit's SHA-1 hash will be automatically converted into a link to that commit on GitHub.

Issue references within a repository

Viewer

Task Lists

If you include a task list in the first comment of an Issue, you will get a handy progress indicator in your issue list. It also works in Pull Requests!

Tables

You can create tables by assembling a list of words and dividing them with hyphens - (for the first row), and then separating each column with a pipe |:

Would become:

First HeaderSecond Header
Content from cell 1Content from cell 2
Content in the first columnContent in the second column

SHA references

Clockwork 1 0 – a time bending puzzle platformer game. Any reference to a commit's SHA-1 hash will be automatically converted into a link to that commit on GitHub.

Issue references within a repository

Any number that refers to an Issue or Pull Request will be automatically converted into a link.

Username @mentions

Typing an @ symbol, followed by a username, will notify that person to come and view the comment. This is called an '@mention', because you're mentioning the individual. You can also @mention teams within an organization.

Automatic linking for URLs

Any URL (like http://www.github.com/) will be automatically converted into a clickable link.

Strikethrough

Any word wrapped with two tildes (like ~~this~~) will appear crossed out.

Markdown Viewer Js Icon

Emoji

GitHub supports emoji!

To see a list of every image we support, check out the Emoji Cheat Sheet.

Last updated Jan 15, 2014

Marked is

  1. built for speed.*
  2. a low-level markdown compiler for parsing markdown without caching or blocking for long periods of time.**
  3. light-weight while implementing all markdown features from the supported flavors & specifications.***
  4. available as a command line interface (CLI) and running in client- or server-side JavaScript projects.

* Still working on metrics for comparative analysis and definition.
** As few dependencies as possible.
*** Strict compliance could result in slower processing when running comparative benchmarking.

Demo

Checkout the demo page to see marked in action ⛹️

These documentation pages are also rendered using marked 💯

Installation

Markdown Viewer Sublime

CLI:npm install -g marked

In-browser:npm install marked

Usage

Warning: 🚨 Marked does not sanitize the output HTML. Please use a sanitize library, like DOMPurify (recommended), sanitize-html or insane on the output HTML! 🚨

CLI

Browser

Node.js

Marked offers advanced configurations and extensibility as well.

Supported Markdown specifications

We actively support the features of the following Markdown flavors.

FlavorVersionStatus
The original markdown.pl--
CommonMark0.29Work in progress
GitHub Flavored Markdown0.29Work in progress

By supporting the above Markdown flavors, it's possible that Marked can help you use other flavors as well; however, these are not actively supported by the community.

Markdown Viewer Vs Code

Security

The only completely secure system is the one that doesn't exist in the first place. Having said that, we take the security of Marked very seriously.

Therefore, please disclose potential security issues by email to the project committers as well as the listed owners within NPM. We will provide an initial assessment of security reports within 48 hours and should apply patches within 2 weeks (also, feel free to contribute a fix for the issue).





broken image