Aurora-code NPM

Aurora 🎨 / Core

GitHub release (with filter) npm bundle size License

Aurora

The C code highlighting engine for the web.

If you are using React, use aurora-react 🚀.

Installation

Using npm

npm install aurora-code

Es module

import aurora from 'aurora-code';

CommonJS

const aurora = require('aurora-code');

Directly import Es module from CDN

import aurora from 'https://cdn.jsdelivr.net/npm/aurora-code@latest/dist/index.js';

Directly include Script tag from CDN

<script src="https://cdn.jsdelivr.net/npm/aurora-code@latest/dist/index.umd.cjs" type="application/json"></script>

Concept

The aurora function takes two arguments, the first one is the code to be highlighted and the second one is the options object.

aurora(code);
aurora(code, config);

aurora(code) returns a string which is the highlighted code.
Code is a string which is C code to be highlighted. Options is an object which is optional.

Options

aurora(code, {
  mode: 'class'; // It uses classnames to highlight the code
}) // It is the default (Recommended)

aurora(code, {
  mode: 'inline'; // It uses inline styles to highlight the code
}) // It uses one dark pro theme if no styles are provided

aurora(code, {
  mode: 'inline', // It uses inline styles to highlight the code
  styles: {
    comment: '#808080',
    keyword: '#00FF00',
    name: '#0000FF',
    function: '#32CD32',
    string: '#FFC0CB',
  },
}); // Not recommended

/* Custom theme */
.aurora-string {
  color: pink;
}
.aurora-keyword {
  color: lime;
}

You can define your own styles for each token type. See the detailed Configuration.

Usage

Using React

If you are using React you can use

import aurora from 'aurora-code';
import 'aurora-code/themes/oneDarkPro.css'; // (css file)
// or you may use your own css
...
...
  <pre>
    <code dangerouslySetInnerHTML={{ __html: aurora(h) }}></code>
  </pre>
...
...

Use state variables and useEffect to update the code and prevent rerendering. Or you can use aurora-react 🚀. It takes care of all these things.

Using HTML and CSS

<script type="module" src="index.js"></script>
<code id="code-block"></div>

import aurora from 'https://cdn.jsdelivr.net/npm/aurora-code@latest/dist/index.js';
const codeBlock = document.getElementById('code-block');
const code = `
int main() {
   printf("Hello, World!");
   return 0;
}`;
codeBlock.innerHTML = aurora(code);

Using Local Files

Download the https://cdn.jsdelivr.net/npm/aurora-code@latest/dist/index.umd.cjs and https://cdn.jsdelivr.net/npm/aurora-code@latest/dist/themes/one%20dark%20pro.css files and use them locally.

<script src="index.umd.cjs" defer></script>

<link rel="stylesheet" href="oneDarkPro.css" />

<body style="background-color: #070e22">
  <pre><code id="code-block"></code></pre>
  <script>
    document.body.onload = () => {
      const codeBlock = document.getElementById('code-block');
      const code = 'int main() {\n  printf("Hello World!");\n  return 0;\n}';
      codeBlock.innerHTML = aurora(code);
    };
  </script>
</body>

Detailed Configuration

Here is an example of theme object for configuring the theme.

// One Dark Pro Theme
one_dark_pro = {
  comment: '#5c6370',
  comment_start: '#5c6370',
  comment_end: '#5c6370',
  preprocessor: '#c678dd',
  defined: '#d19a66',
  header_file: '#98c379',
  keyword: '#c678dd',
  name: '#ef596f',
  string: '#98c379',
  'quote single': '#98c379',
  'quote double': '#98c379',
  'quote angle': '#98c379',
  format_specifier: '#d19a66',
  number: '#d19a66',
  bin_prefix: '#ef596f',
  hex_prefix: '#ef596f',
  oct_prefix: '#ef596f',
  function: '#61afef',
  operator: '#c678dd',
  escape: '#56b6c2',
  'open_paren bracket0': '#d19a66',
  'open_curly bracket0': '#d19a66',
  'close_paren bracket0': '#d19a66',
  'close_curly bracket0': '#d19a66',
  'open_paren bracket1': '#c678dd',
  'open_curly bracket1': '#c678dd',
  'close_paren bracket1': '#c678dd',
  'close_curly bracket1': '#c678dd',
  'open_paren bracket2': '#56b6c2',
  'close_curly bracket2': '#56b6c2',
  'close_paren bracket2': '#56b6c2',
  'open_curly bracket2': '#56b6c2',
  'open_square bracket0': '#c678dd',
  'close_square bracket0': '#c678dd',
  'open_square bracket1': '#d19a66',
  'close_square bracket1': '#d19a66',
  'open_square bracket2': '#56b6c2',
  'close_square bracket2': '#56b6c2',
};

Here is an example of theme css.