• Stars
    star
    414
  • Rank 104,550 (Top 3 %)
  • Language
    CSS
  • License
    GNU General Publi...
  • Created over 2 years ago
  • Updated about 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Render Markdown to HTML on any website using a md tag

Markdown-Tag

The easiest way to add Markdown support to your website!
Show your support!

Example and usage

You can view a demo of Markdown Tag in use here.

How to use Markdown Tag:

Add support to any website to use markdown ANYWHERE with a simple tag! Like so -

        <md>
# Markdown Support
           
           Awesomeness
         </md>

include this script at the bottom of your HTML document.

<script src="https://cdn.jsdelivr.net/gh/MarketingPipeline/Markdown-Tag/markdown-tag.js"></script> 

How to use Markdown Tag with GitHub Styling:

Instead of using a <md> tag use

     <github-md># Example </github-md>

How to render new text or a new Markdown Tag added to HTML:

Call this function using a onclick etc..

renderMarkdown();

Syntax

This script uses Showdown to render Markdown - to read about the Showdown's Markdown syntax style click here

How to use CommonMark Syntax:

If you wish to use CommonMark syntax instead of Showdown's use this script instead of the one above at the bottom of your HTML document.

<script src="https://cdn.jsdelivr.net/gh/MarketingPipeline/Markdown-Tag/markdown-tag-commonmark.js"></script> 

How to use GitHub Flavored Markdown Syntax:

If you wish to use GitHub Flavored Markdown Spec syntax use this script instead of the other script's above at the bottom of your HTML document.

   <script src="https://cdn.jsdelivr.net/gh/MarketingPipeline/Markdown-Tag/markdown-tag-GitHub.js"></script> 

Note: This options includes - Tables, GitHub Mentions & More.

Syntax Highlighting

Note: to use Syntax Hightlighting - you must use the GitHub flavored version of Markdown Tag.

By default using a <github-md> will automatically add a CSS stylesheet for GitHub like syntax hightlighting colors.

To use Syntax Highlighting with a <md> tag, you will need to apply a CSS stylesheet. You can find a list of Syntax Hightlighting Stylesheets that work with Markdown Tag here

Handling untrusted content

By default Markdown-Tag does not santize the Markdown you provide, since in most use cases the content is trusted.

Any other content provided from user's on your website etc. Should be santized before adding it inside a <md> or <github-md> tag to prevent XSS.

Contributing GitHub

Want to improve this? Create a pull request with detailed changes / improvements! If approved you will be added to the list of contributors of this awesome project!

Looking for a task to work on? Check the tasks that need improved in the to-do list.

See also the list of contributors who participate in this project.

License GitHub

This project is licensed under the GPL-3.0 License - see the LICENSE.md file for details.

More Repositories

1

Termino.js

Create a web based terminal on any website - great for games, animations and real world apps!
JavaScript
570
star
2

Python-Selenium-Action

Run Selenium with Python via Github Actions using Headless or Non-Headless browsers!
Python
116
star
3

Simply-Docs

A simple, fast, free & easy to use static based plain HTML template. That allows you to make a beautiful personal / blog or technical documentation website really quickly.
HTML
82
star
4

Awesome-Repo-Template

An awesome repo template packed with tons of tools & more to kick-start your next project / repo!
HTML
81
star
5

Awesome-CSS-Resources

An awesome list of CSS / SCSS frameworks & resources.
66
star
6

Code-Runner-Web-Component

A web component that allows you to run high level programming languages on your websites (static websites included!)
JavaScript
50
star
7

Ace-Editor-Web-Component

A web-component to add code editors to your web page powered via Ace Editor
JavaScript
48
star
8

CSS-Image-Loader

Add a image loader & image load error (without adding an HTML element or using JS).
CSS
20
star
9

Scriptor.js

A JavaScript Library for building custom text editors with ease 📝
JavaScript
19
star
10

Website-Launch-Checklist

☑️ A checklist for launching a website
17
star
11

OnThisDay.js

A JavaScript library to find out what events happened today or any provided day in history.
JavaScript
14
star
12

Emoji-Parser.js

Replace keywords with emoji's on your website 😋
JavaScript
14
star
13

Serverless-Guestbook

A serverless guestbook hosted on Github Pages. Powered for free by Google.
JavaScript
11
star
14

Serverless-Forms

Serverless forms templates with NO REDIRECTS powered for FREE by Google.
CSS
11
star
15

API-Security-Checklist

☑️ A security checklist for anyone who's developing and deploying APIs
10
star
16

Media-Card-Web-Component

A web component to display books, movies, TV shows & song details on any website
JavaScript
9
star
17

OCR-PDF-Action

A GitHub action for turning scanned PDF's into searchable documents
Shell
7
star
18

Estuary

A HTML, CSS, and JavaScript framework that looks like the default Kodi theme.
HTML
7
star
19

Python-In-The-Browser

Examples & resources on how to use Python in the web browser.
6
star
20

Quote-Placeholders

Automatically updated quote images for your GitHub Profile or website.
6
star
21

JSON-Tag

Render JSON data in HTML & LOTS more using a json tag
JavaScript
6
star
22

Emoji-Fallback.js

Provide support for emojis on ALL web browsers!
JavaScript
4
star
23

Pokedex-Web-Component

A web component to show off your favorite Pokemon inside of a Pokedex
4
star
24

TOC-Generator-Action

A Github Action to generate a table of contents in your README
Dockerfile
4
star
25

Image-Optimizer-Action

A Github Action to optimize / compress images in your repository
Shell
4
star
26

Estuary-Redux

A revived, modern looking version of the Estuary CSS design framework.
HTML
4
star
27

TheMovieDB-API-Wrapper.js

A JavaScript library for EASILY fetching info from TheMovieDB API with support for torrent file names.
JavaScript
4
star
28

GitHub-Action-Runner

Trigger / run GitHub Actions from a self-hosted web page with pure JavaScript.
JavaScript
4
star
29

Extractor

A command line based tool for downloading & extracting ZIP and TAR.GZ files. Or simply just extract them!
Python
4
star
30

Bodi

A media-center like app heavily inspired by Kodi currently built in HTML, CSS & JS (WIP)
HTML
3
star
31

Image-Fallback.js

Handle ALL images not found on your website automatically with ease!
JavaScript
3
star
32

IPTV-Parser.js

A JavaScript library to easily parse M3U / IPTV
JavaScript
3
star
33

File-Loader.js

Easily dynamically load scripts and style-sheets to HTML pages in parallel order
JavaScript
2
star
34

Conversations

A chat-bot that is community-driven and open source – powered by you! (WIP)
HTML
2
star
35

TryCatch.js

A JavaScript library to handle errors in a more structured way.
JavaScript
2
star
36

iOS-Shortcuts-Storage

Assets for iOS shortcuts will be stored here
HTML
1
star
37

GitHub-Buttons-Web-Component

GitHub Buttons as a web component - show off your stars, followers & more! ⭐
JavaScript
1
star
38

GitHub-Ribbon-Web-Component

A custom web element to easily add a GitHub Fork Me ribbon to your web pages!
JavaScript
1
star
39

CBC-News-Streams.js

A JavaScript library to fetch free live TV stream URLs from CBC.ca / CBC News
JavaScript
1
star
40

Pluto-TV.js

A JavaScript library to fetch Pluto TV streams! Works in the browser!
JavaScript
1
star