search

showdownjs / showdown

A bidirectional Markdown to HTML to Markdown converter written in Javascript
http://www.showdownjs.com/
MIT License
14.26k stars 1.56k forks source link

code highlight #760

Open deligent-ant opened 4 years ago

deligent-ant commented 4 years ago

how combined with Highlight.js to make code more friendly

jcs090218 commented 4 years ago

That will be awesome if this feature is implemented. Also check out this showdown-highlight.

Chopinsky commented 4 years ago

Actually, the generated markups are compatible with the Highligh.js's CSS class conventions, all you need to do is to import Highlight.js to your application. And the simplest way, as suggested by Highlight.js, is to import the module in your application's html header:

<head>
<!-- meta stuff -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/github.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

<!-- more meta stuff -->
</head>

-- Edit --

It turns out that sometimes calling hljs.initHighlightingOnLoad(); in the html head tag maybe premature, especially if you're using frontend framework to render the content (i.e. React), hence you should initialize hljs once your content are fully rendered, otherwise, the init code may not be able to catch all the code blocks and wrap them with hightlights just yet.