markdown-hljs

markdown with code highlight

Usage no npm install needed!

<script type="module">
  import markdownHljs from 'https://cdn.skypack.dev/markdown-hljs';
</script>

README

This build on top of marked and highlightjs

So you markdown with code syntax highlighting version 0.1.1

installation

npm i markdown-hljs

cdn link

<script src="https://cdn.jsdelivr.net/npm/markdown-hljs"></script>

SVLETE REPL DEMO

SVLETE REPL DEMO with liquidjs

Docs

  • not that needed you just have to understand markdown
  • for code syntax hightlighting you need to import a theme
    • from highlight.js/scss/THEMENAME.scss or highlight.js/styles/THEMENAME.css ---> THROUGH NPM NODE_MODULES
    • or TRY CDN
    • CHECKOUT THE THEMES
  • if you wanted to declare a variable:
    • $CAPS= any - they are not visible
    • eg: $NAME= MyName
    • can be access anywhere in the markdown as: {$NAME}
  • by default it will be able to highlight 35 common languages including svelte
["xml", "bash", "c", "cpp", "csharp", "css", "markdown", "diff", "ruby", "go", "ini", "java", "javascript", "json", "kotlin", "less", "lua", "makefile", "perl", "objectivec", "php", "php-template", "plaintext", "python", "python-repl", "r", "rust", "scss", "shell", "sql", "swift", "yaml", "typescript", "vbnet", "svelte"]
  • get lang(s)

    import { getLang} from 'markdown-hljs';
    getLang() // for a list of all language names
    getLang(languageAndOrAliases: Array<string> | string, options?: { getMatch?: boolean; error?: boolean }) // for a Language object
    
  • if you want to add another language(s)

    import customLang from './path-to-customLang'
    import xml from 'highlight.js/lib/languages/xml.js';
    
    import Markdown,{setLang} from 'markdown-hljs';
    
    setLang({language: 'xml', defineLanguage: xml, aliases: ['html'] })
    // to define a language you need to pass the defineLanguage function
    // if you pass only language and aliases it will just add aliases for the language if it exists
    
    setLang({language: 'customLang', defineLanguage: customLang})
    
    result=Markdown(markdown string,error=false)
    // error is false by default;
    // meaning is if highlight language is not recognised throw or don't throw error
    
    
  • add another language(s) but without defaults

    import hljs from 'highlight.js/lib/core';
    
    import customLang from './path-to-customLang'
    import xml from 'highlight.js/lib/languages/xml.js';
    
    
    import Markdown from 'markdown-hljs';
    import {Highlight,setHljs,setLang} from 'markdown-hljs';
    
    setHljs(hljs)
    
    setLang({language:'xml', defineLanguage: xml, alias: ['html']})
    
    setLang({language: 'customLang', defineLanguage: customLang})
    
    result=Markdown(markdown string)
    
    
  • to use all languages by highlight.js

import { setHljs } from 'markdown-hljs';
import hljs from 'highlight.js';

setHljs(hljs);
  • markdown without code syntax highlight:

    import {marked} from 'markdown-hljs';
    
    // marked is just the marked lib + variable support
    
    result=marked(markdown string)
    
    
  • highlight code with defaults

    import {Highlight, highlightCode} from 'markdown-hljs';
    
    result=Highlight(code string, languageAndOrAliases, error=false) // code in <pre><code>
    // error is false by default;
    
    OR
    
    result=highlightCode(code string, languageAndOrAliases, error=true) // only code str
    // error is true by default;
    
    //error: meaning is if highlight language is not recognised throw or don't throw error
    

    for languageAndOrAliases we can pass in an Array or string in the form js, cjs, javascript or ['js','javacript'] or 'js' it will try to find the language by both languageName and aliases

    so in markdown you can also do

    ```js,javascript

    code..

    ```

Get started

clone repo

npm install
npm run build

then

cd tests/svelte
npm install
npm run dev

Navigate to localhost:5000. You should see your app running. Edit a component file in src, save it, and reload the page to see your changes.

markdown-hljs