syntaxx-reactjs
v0.1.7
Published
Highlight code syntax like pro
Downloads
11
Readme
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
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 import
ed instead of require
d.
Unfortunately NextJS doesn't support ESM yet.
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
will display the code, skipping the first empty lineconst content = ` while(true) { console.log('Blabetiblou'); }`
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