Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
@financial-times/o-syntax-highlight
Advanced tools
A syntax highlighter for Origami-supported documentation that wraps PrismJs
A syntax highlighter for Origami-supported documentation that wraps PrismJs.
Check out how to include Origami components in your project to get started with o-syntax-highlight
.
This component provides accessible syntax highlighting for bash
, diff
, Javascript, JSON, YAML/YML, HTML, CSS and Sass/SCSS.
If there are any languages you would like to highlight that we don't currently support, please open an issue and we will provide it.
o-syntax-highlight works with a single class. As long as this class is present in a wrapper that holds the code you wish to highlight, it will tokenise and colorise the syntax according to your preference. The semantically correct way of declaring a code block is to place a <code>
inside a <pre>
. That is what o-syntax-highlight looks for when it is tokenising the code block.
<pre>
is whitespace sensitive, so it is important to follow the markup to get the correct spacing for your syntax.
Every language has its own set of styles — in order to highlight html for example, you would need:
<div class="demo" data-o-component='o-syntax-highlight'>
<pre>
<code class="o-syntax-highlight--json">
<!-- everything in this element will be highlighted, including this comment! -->
"object": {
"string": "string",
"array": [
"name",
"names"
],
"object" : {
"nested": "html"
}
"numbers": 1
}</code>
</pre>
</div>
The same is true for all other available languages:
o-syntax-highlight--js
or o-syntax-highlight--javascript
o-syntax-highlight--html
o-syntax-highlight--css
o-syntax-highlight--scss
or o-syntax-highlight--sass
o-syntax-highlight--json
o-syntax-highlight--yaml
o-syntax-highlight--diff
It is worth pointing out that the wrapper can hold any html elements. So long as all of the code blocks within the wrapper are written as described above, o-syntax-highlight will ignore everything else.
<div class="demo" data-o-component='o-syntax-highlight'>
<div class="example">
<p></p>
<p></p>
</div>
<pre>
<code class="o-syntax-highlight--json">
<!-- everything in this element will be highlighted, including this comment! --></code>
</pre>
<button type="button" name="button">Button</button>
</div>
However, when highlighting HTML
, there is a caveat.
Because of the way in which the <code>
tag works, if you want to highlight markup which has already been declared, you will have to replace and <
with <
in order for the markup to be read as a string instead of actual HTML.
For example:
<pre>
<code class="o-syntax-highlight--html">
<html>
<head>
<!-- links and scripts -->
</head>
<body>
<div class="some-class"</div>
</body>
</html></code>
</pre>
No code will run automatically unless you are using the Build Service.
You must either construct an o-syntax-highlight
object or fire the o.DOMContentLoaded
event, which oComponent listens for.
In order to use o-syntax-highlight
with already declared markup, you can use:
import oSyntaxHighlight from '@financial-times/o-syntax-highlight';
oSyntaxHighlight.init();
If you are initialising the component imperatively, you will need to supply a string of code that you want to highlight, and an options object that defines the language of that code. To tokenise the string you will need be explicit about the element that will hold the highlighted syntax:
import oSyntaxHighlight from '@financial-times/o-syntax-highlight';
const highlighter = new oSyntaxHighlight('code to highlight', { language: 'html'});
myElement.innerHTML = highlighter.tokenise();
You can include highlighting for all languages by calling:
@include oSyntaxHighlight();
You can also be more specific about which languages you would like styling output for by using an $opts
map:
@include oSyntaxHighlight($opts: (
'languages': (
'html',
'json'
)
));
o-syntax-highlight
accepts the following options:
When using Marked it is possible to override its default renderer so you can create custom output for code blocks. To get o-syntax-highlight
compatible output see the example in this Github issue.
State | Major Version | Last Minor Release | Migration guide |
---|---|---|---|
✨ active | 3 | N/A | migrate to v3 |
⚠ maintained | 2 | 2.1 | migrate to v2 |
╳ deprecated | 1 | 1.6.4 | N/A |
If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #origami-support or email Origami Support.
This software is published by the Financial Times under the MIT licence.
FAQs
A syntax highlighter for Origami-supported documentation that wraps PrismJs
The npm package @financial-times/o-syntax-highlight receives a total of 95 weekly downloads. As such, @financial-times/o-syntax-highlight popularity was classified as not popular.
We found that @financial-times/o-syntax-highlight demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 10 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
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.