aurora-code
Advanced tools
The C code highlighting engine for the web.
If you are using React, use aurora-react 🚀.
npm install aurora-code
import 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);
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.
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.
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.
FAQs
The C code highlighting engine for the web.
We found that aurora-code demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.
Security News
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.