marketingpipeline / markdown-tag

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

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

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

markdown-tag's Issues

[Bug]: Markdown not working

Contact Details

[email protected]

What happened?

I tried using Markdown-tag and it was not working, everything was a codeblock. So, to check if it was an error with my code, I tried deploying the exact code in the index.html of this exact repository and it would result in the same bug. Below is an image of what I see:

Please check if you can reproduce this bug

What type of browser are you seeing the problem on?

• Brave Browser Nightly on Windows 11
• Google Chrome on Android 12

Both produce the same problem

Code to produce this issue.

Check the index.html file of this repository

Is there a way to get an existing <md> element to render new markdown that wasn't initially there?

Suggestion / Feature Request

If there is, it should be in the doc; if not, here's a feature request.

Thank you!

Whitelist / Blacklist Markdown features

Suggestion / Feature Request

We often have the use case, that we got styled content (html or markdown) from external systems.
Mostly the features are restricted by the cms editor but we have to ensure that we restrict markdown features for the content editor.

As example, we only want bold formatting and links but not the possibility to use paragraphs, breaks, headlines or images.

[Feature Request / Suggestion]: Support code syntax highlighting for GFM

Suggestion / Feature Request

It would be nice to have support for syntax highlighting:

```javascript
function foo() {
}
```

as

function foo() {
}

You can use PrismJS for that. You can use it as an external dependency that need to included on the page.

[Feature Request / Suggestion]: Render markdown from a file.

Suggestion / Feature Request

Assuming some markdown documents stored on the website, is there a chance to use these documents without rewriting them into a html?

[Bug]: Tag(s) added after page load do not render

Contact Details

No response

What happened?

When inserting a tag into a page after page load - the other tags do not render.

Reported first - Is there a way to get an existing element to render new markdown that wasn't initially there? · Issue #3

What type of browser are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

Code to produce this issue.

<p id="addElement">Add A Markdown Tag</button>
<md># Hello</md>
    <input type="text" name="enter" class="enter" value="<md> # Hello World</md>" id="AddMDTag"/>
    <input type="button" value="click" onclick="addElement();"/>
</body>

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


<script type="text/javascript">function addElement()
{
InputField = document.getElementById('AddMDTag');
    var Paragraph = document.getElementById('addElement');
    Paragraph.innerHTML += InputField.value
}</script>