Syntaxx-reactjs NPM

Syntaxx ReactJS

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

./example/

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

Contents

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;
}