0.5.0 • Published 8 years ago
syntux v0.5.0
Syntux
Syntax highlighting for React without the bulk.
Supported Languages
All languages and styles from highlight.js.
Installation
Npm
npm install syntux
Example
// Require a style. (Returns a React style element).
var Theme = require('syntux/style/solarized_dark');
// Require the highlighters.
var XML = require('syntux/xml');
var CSS = require('syntux/css');
var JS = require('syntux/javascript');
// To access the underlying hljs simply require("syntux").
// Use them in a component.
var MyComponent = function () {
return (
<div>
{ Theme }
<XML>
{'<a href="example.html"> Click me </a>'}
</XML>
<CSS>
{'body { background-color: green }'}
</CSS>
<JS>
{'var x = { y: "hi" };'}
</JS>
</div>
);
});
Which (when rendered) will output:
Usage with Marked (Markdown)
var React = require("react");
var marked = require("marked");
var syntux = require("syntux");
// Ensure needed languages are available.
require("syntusk/javascript");
require("syntusk/css");
require("syntusk/xml");
// Set code renderer.
var renderer = new marked.Renderer();
renderer.code = function(code, lang) {
lang = lang.toLowerCase();
code = syntux.highlight(lang, code, true).value;
return '<pre><code class="hljs ' + lang + '">' + code + '</code></pre>';
};
marked.setOptions({ renderer: renderer });
// Use it!
marked("```javascript var x = 1;```")
0.5.0
8 years ago
0.4.3
8 years ago
0.4.2
8 years ago
0.4.1
9 years ago
0.4.0
9 years ago
0.3.9
9 years ago
0.3.8
9 years ago
0.3.7
9 years ago
0.3.6
9 years ago
0.3.5
9 years ago
0.3.4
9 years ago
0.3.3
9 years ago
0.3.2
9 years ago
0.3.1
9 years ago
0.3.0
9 years ago
0.2.6
9 years ago
0.2.5
9 years ago
0.2.4
9 years ago
0.2.3
9 years ago
0.2.2
9 years ago
0.2.1
9 years ago
0.2.0
9 years ago
0.1.2
9 years ago
0.1.1
9 years ago
0.1.0
9 years ago
0.0.9
9 years ago
0.0.8
9 years ago
0.0.7
9 years ago
0.0.6
9 years ago
0.0.5
9 years ago
0.0.4
9 years ago
0.0.3
9 years ago
0.0.2
9 years ago
0.0.1
9 years ago
0.0.0
9 years ago