'Is there a way of using Markdown in web development by tagging div? [closed]

Is it possible to use Markdown on website without manually parsing the content ?

I saw this tool that can be used to create website with markdown, but I need to parse the content manually by running some commands like marked.parse().

I don't want to parse everything manually, I want the content to be straight parsed from the website by using "class". for example if I add class="markdown" then the content will get parsed, something like this:

<!doctype html>
<html>
<head>
  <script src="https://<some website>"></script>
  <title>Marked in the browser</title>
</head>
<body>
  <div class="markdown">
    # Hellow World !
  </div>
</body>
</html>

How can I do that ?

htmlwebmarkdown


Solution 1:[1]

From the above comment ...

"Is there any tool that does that ?" Short answer. No. There is no approach or tool which can fulfill the OP's wish by pure presentational layer magic. The OP on client side always needs a JavaScript based parsing and DOM rendering approach similar to the tool, the OP is mentioning."_

Thus said, of cause the OP can classify any markdown content like with the OP's example code.

In order to then present the parsed content to the consumer of a JavaScript enabled client, the OP needs an additional script which utilizes e.g. the also already mentioned marked.parse method.

Something similar to this ...

document
  .querySelectorAll('.markdown')
  .forEach(elmNode =>
    elmNode.innerHTML = marked.parse(elmNode.textContent)
  );
body { zoom: .8; }
<script src="https://cdn.jsdelivr.net/gh/markedjs/marked@bf1295a499c60abc096124ab33804071cb8d89fe/marked.min.js"></script>

<div class="markdown">
  # Hellow World !
</div>
<div class="markdown">
  ## markdown render test
</div>
<div class="markdown">

  ## Usage

  ### Warning: ? Marked does not [sanitize](https://marked.js.org/#/USING_ADVANCED.md#options) the output HTML. Please use a sanitize library, like [DOMPurify](https://github.com/cure53/DOMPurify) (recommended), [sanitize-html](https://github.com/apostrophecms/sanitize-html) or [insane](https://github.com/bevacqua/insane) on the output HTML! ?

  ## Demo

  Checkout the [demo page](https://marked.js.org/demo/) to see marked in action ??

  ## Docs

  Our [documentation pages](https://marked.js.org) are also rendered using marked ?

  Also read about:

  * [Options](https://marked.js.org/#/USING_ADVANCED.md)
  * [Extensibility](https://marked.js.org/#/USING_PRO.md)

</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions