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