The C code highlighting engine for the web.
If you are using React, use aurora-react 🚀.
npm install aurora-codeimport aurora from 'aurora-code';const aurora = require('aurora-code');import aurora from 'https://cdn.jsdelivr.net/npm/aurora-code@latest/dist/index.js';<script src="https://cdn.jsdelivr.net/npm/aurora-code@latest/dist/index.umd.cjs" type="application/json"></script>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);Code is a string which is C code to be highlighted. Options is an object which is optional.
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 providedaurora(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.
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.
<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);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>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.
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.