aurora-code

v2.5.5

Published

4 months ago

The C code highlighting engine for the web.

Downloads

0High
0Medium
0Low

codeabinash

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/oneDarkPro.css files and use them locally.

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

<link rel="stylesheet" href="../../dist/themes/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.default(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.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme