Syntaxx ReactJS

Highlight code syntax like pro using a truly light wrapper around the amazing Lowlight

• [x] code highlight using Highlight.js, including 196 languages and 242 styles
• [x] line numbering and wrapping fully css-styleable
• [x] Optimized experience both for devs and end users

Contents

• Install
• Basic usage
• Configuration
  • Content
  • Properties
  • Styling Highlighting
  • Custom look and feel
• Roadmap
• License

Install

npm install --save syntaxx-reactjs

NextJS Compatibility

This package is using Lowlight that is provided as ESM only: Node 12+ is needed to use it, and it must be imported instead of required. Unfortunately NextJS doesn't support ESM yet.

See workaround

Basic usage

import React from 'react'

import Syntaxx from 'syntaxx-reactjs'
import 'highlight.js/styles/default.css'
import 'syntaxx-reactjs/styles/default.css'

export default function Component() {
  code=`
const c = 'Blabetiblou';
console.log(c);`

  return <Syntaxx language='javascript' value={code} />
}

Configuration

Content

Syntaxx expects the code to be highlighted to be provided as a text string via the component content or alternatively via the value property.

<Syntaxx language="bash">{`CODE_TO=beHighlighted`}</Syntaxx>

Best practices:

• Use template literals to preserve new lines, indentation and ease usage of ' and "
• If the content starts with a new line \n, the first character is ignored. Developers can therefore easily check the indentation, including for the first line

  const content = `
  while(true) {
    console.log('Blabetiblou');
  }`

  will display the code, skipping the first empty line

  while(true) {
    console.log('Blabetiblou');
  }

• Longer content should be declared in separated files and later imported

  export const content = `...`
  
  import {content} from './codes.js'

Properties

| Prop name | default value | description | --- | --- | --- | | language | (required) | expected programming language to be highlighted. See available values in Highlight.js doc | value | | code to be highlighted if no inner content is provided. The first new line \n char is ignored if present (see content section) | firstLineNumber | 1 | Starting value for the line numbering

Styling highlighting

Highlight.js comes with hundreds of pre-built styling. Just include them to update the rendering of Syntaxx

import 'highlight.js/styles/default.css'

Custom look and feel

Highlighted lines are disposed using a grid layout that can be fully customized

<pre>
  <code>
    <span class="syntaxx-grid">
      <span class="syntaxx-linenumber">1</span>
      <span class="syntaxx-line">...</span>
      <span class="syntaxx-linenumber">2</span>
      <span class="syntaxx-line">...</span>
      <span class="syntaxx-linenumber">3</span>
      <span class="syntaxx-line">...</span>
    </span>
  </code>
</pre>

Only few layout properties are hardcoded in style attribute and are advised to be kept untouched

| element | reserved css property | value | | --- | --- | --- | | span.syntaxx-grid | display | grid | span.syntaxx-grid | grid-template-columns | auto 1fr | span.syntaxx-linenumber | grid-column | 1 | span.syntaxx-line | grid-column | 2 | span.syntaxx-line | white-space | pre-wrap

Other attributes can be updated with no risk.

code > span.syntaxx-grid {
  font-family: monospace, "Courier New";
}
code > span.syntaxx-grid > span {
  /* Vertical space between lines */
  margin-bottom: 1px;
}
code > span.syntaxx-grid > span.syntaxx-linenumber {
  /* line numbering background */
  background-color: red;
}
code > span.syntaxx-grid > span.syntaxx-line {
  /* Nice line wrapping */
  padding: 1em;
  text-indent: -1em;
}

Roadmap

• [x] Publish on NPM
• [x] Start line number
• [ ] Mark line
• [ ] Line comment
• [ ] Inline code
• [ ] de-indent
• [ ] optional empty first line removal + write doc of registerLanguage
• [ ] add property of component to register language
• [ ] optionally load languages
• [ ] dynamic styling
• [x] render optimization
• [ ] responsive layout
• [ ] optional line numbering select protection
• [ ] demo website
• [ ] secondary stylesheet

License

MIT © https://github.com/raphaeljoie