syntacks

Dependency free syntax highlighter for react.

The component is scaled 100% wide and 100% high relative to the div .wrapper which contains it. This allows for a full customization for height, width and other things such as transitions and box shadows.

Download via npm: https://www.npmjs.com/package/syntacks

npm install syntacks

Demo: https://git.io/vQ9Nj

Upload/browse themes: https://goo.gl/iUrPZ7

Installation

Copy the file your download like so...

Import it into your file...

Add your syntack box...

And you're done :) 👍

Current Themes

Default themes are found here https://git.io/vQ9Nj and user uploaded custom themes here https://goo.gl/iUrPZ7

Creating custom themes

To create or use custom themes, all you have to do is define one with its properties like so. The parameters follow the below template.

/*
  > color
  > bgColor
  > spineColor
  > quotesColor
  > conditionColor
  > globalsColor
  > standardMethodsColor
  > specialMethodsColor
  > commentColor
*/

Defining template and its theme.

import { Syntack, SyntackThemes } from '../syntack/syntack.js';
 
const myCoolTheme = new SyntackThemes(
    'rgb(255, 255, 255)',
    'rgb(41, 43, 57)',
    'rgb(29, 31, 42)',
    'rgb(138, 154, 181)',
    'rgb(47, 162, 124)',
    'rgb(203, 89, 192)',
    'rgb(230, 28, 26)',
    'rgb(174, 95, 230)',
    'rgb(67, 135, 153)'
);
 
/* Note: Don't get confused,
* you don't need to specifically
* use rgb it's just what I am using in this example. */

Adding and compling your theme.

// Use the customTheme prop instead of the default, theme.
<Syntack customTheme={myCoolTheme.compiled()} code={myCode}/>

It works!

Real time editor /w syntax

In order to create an input into the syntack component we just have to use some super simple vanilla react.

import React, {Component} from 'react';
import {Syntack} from '../syntack/syntack.js';
 
class myComponent extends Component {
  constructor(props) {
    super(props)
    this.state = { editedCode: ''};
  }
  handleCode(e) {
    this.setState({editedCode: e.target.value});
  }
  render() {
    const SyntaxOutput = {
      "width":"500px",
      "height":"350px",
      "position":"absolute",
      "transform":"translate(-50%, -50%)",
      "left":"50%",
      "top":"40%"
    };
 
 
    const defaultInput = {
      "width":"500px",
      "height":"200px",
      "position":"absolute",
      "transform":"translate(-50%, -50%)",
      "left":"50%",
      "top":"80%"
    };
 
    return(
        <div>
          <div style={SyntaxOutput}>
            <Syntack theme='github' code={this.state.editedCode}/>
          </div>
          <textarea onChange={e => this.handleCode(e)} style={defaultInput} />
        </div>
      );
    )
  }
}