README

Prism-sapper-renderer

Prism-sapper-renderer is a library for highlighting code in MDX with mdsvex on Sapper.

This is in early development ! if you have bugs or something, please email me.

reo.akarinibu0215@gmail.com

Installation

yarn

yarn add prism-sapper-renderer

npm

npm i prism-sapper-renderer

How to use

This library includes 5 functions.

highlighter

This is for mdsvex highlight options, highlighter in rollup.config.js.

import { mdsvex } from 'mdsvex';
import { highlighter } from 'prism-sapper-renderer'

svelte({
  extensions: [
    '.svelte',
    '.mdx'
  ],
  preprocess: mdsvex({
      extension: ".mdx",
        layout: './src/MDXLayout.svelte',
          highlight: {
              highlighter
        }
    }),
})

And you can create custom layout named MDXLayout here where Highlight component is imported and exported.

<script context="module">
  import Highlight from './components/Highlight.svelte'
  export { Highlight }
</script>

<slot />

In this Highlight component, you can use other 4 functions.

Highlight component

By default, 4 themes is prepared

coy.css
dad.css
dark.css
default.css

you can create custom css if you like.

Highlight component is like this ...

<script>
import { onMount } from 'svelte';

import 'prism-sapper-renderer/dist/themes/dark.css'
import {getStyle,  getTokens, LinesToHighlight, isHighlightedLine} from 'prism-sapper-renderer'
export let language;
export let codeString;

let lines;
let highlight;
  
  onMount( () => {
    ({lines, highlight} = getTokens(codeString, language))
  })
  
</script>

<style lang="scss">
  ._code_wrapper {
    padding-left: 0.5em;  
  }
  
  ._font {
    white-space: pre-wrap;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  }
  
  ._highlight-line {
  background-color: rgba(188, 193, 207, 0.404);
  margin-left: -0.5em;
  padding-left: 0.5em - 0.3em ;
  display: block;
  border-left: 0.3em solid rgb(121, 188, 250);
}
</style>

<slot>
  <div class="_code_wrapper custom_wrapper">
    {#if lines !==  undefined}
      {#each lines as line, index}
        <div 
          class:_highlight-line="{LinesToHighlight(highlight, index) || isHighlightedLine(line).ishighlight}" 
          class="_font"
        >
          {#each isHighlightedLine(line).replaceline as token}
            <span class={`${getStyle(token.type)}`}>
              {token.content}
            </span>
          {/each}
        </div>
      {/each}
    {/if}
  </div>
</slot>

getTokens

This create formatted code Tokens.

getStyle

This create Token style based on each Token type.

LinesToHighlight

This create line highlight.

In MDX file, you can put special directive ( @@ ) on first line on code and put Bracket ( {} ) following @@. In Bracket, specify number you want to highlight like this.

```html
@@{ 2, 3-5}
<!DOCTYPE html> 
<head>  
  <meta charset="utf-8" />
  <title>I can haz embedded CSS and JS</title>
</head>  

<body> 
  <p class=prism></p>
</body>  
```

Number starts 1, if you want continuous highlight, you can write like 3-5.

isHighlightedLine

if you don't like number, you can put //highlight, //highlight-start, //highlight-end.

you cannot use this with LinesToHighlight. you cannot use //highlight between //highlight-start, //highlight-end.

```javascript  
(function someDemo() {
  var test = "Hello World!";  //highlight
  console.log(test); 
})();                       //highlight-start

return () => <App />;     //highlight-end
```

Usage no npm install needed!