客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
开源软件名称：ccampbell/rainbow开源软件地址：https://github.com/ccampbell/rainbow开源编程语言：JavaScript 89.9%开源软件介绍：RainbowRainbow is a code syntax highlighting library written in Javascript. It was designed to be lightweight (~2.5kb), easy to use, and extendable. It is completely themable via CSS. DemoYou can see rainbow in action at http://rainbowco.de. You can also build/download custom packages from there. Contents
Quick StartBrowser
By default Node.jsRainbow 2.0 introduced support for node.js. All of the existing API methods should work, but there is also a new Install rainbowHighlight some codevar rainbow = require('rainbow-code');
var highlighted = rainbow.colorSync('// So meta\nrainbow.colorSync(\'var helloWorld = true;\');', 'javascript');
console.log(highlighted);Supported BrowsersRainbow 2.0 should work in the following browsers:
For older browsers you can download the legacy 1.2.0 release. Supported LanguagesCurrently supported languages are:
Specifying a languageIn your markup the <pre><code data-language="javascript">var testing = true;</code></pre>Rainbow also supports the HTML5 style for specifying languages: <pre><code class="language-javascript">var testing = true;</code></pre>And the Google prettify style: <pre class="lang-javascript"><code>var testing = true;</code></pre>ThemesThemes are located in the
Rendering code blocksAs of version 2.0 the themes use a clever trick to display the highlighted code. All code blocks default to This means for users who do not have JavaScript enabled the code will fade in after 2 seconds. If JavaScript is enabled, the animation is stopped on load and the delay is reset to There is also a preload animation that will show up for any code block that takes longer than 300ms to load. Adding custom rules for specific languagesA SASS mixin was added to simplify defining styles that should only apply for a specific language. Using it looks like this: @include language("html")
.support.operator
color: #fff
@include language(("javascript", "js"))
.variable.super
color: #66D9EFYou can pass a single language or a list of languages. JavaScript API DocumentationRainbow has four public methods: Rainbow.colorRainbow.color is used to highlight blocks of code. For convenience, this method is called automatically to highlight all code blocks on the page when
Preventing automatic highlighting on page loadIf you want to prevent code on the page from being highlighted when the page loads you can set the Rainbow.defer = true;Note that you have to set this before Extra options for colorAs of right now there is one extra option for color. globalClassThis option allows you to have an extra class added to every span that Rainbow renders. This can be useful if you want to remove the classes in order to trigger a special effect of some sort. To apply a global class you can add it in your markup: <pre><code data-language="javascript" data-global-class="animate">var hello = true;</code></pre>Or you can pass it into a Rainbow.color('var hello = true;', {
language: 'javascript',
globalClass: 'animate'
});Rainbow.extendRainbow.extend is used to define language grammars which are used to highlight the code you pass in. It can be used to define new languages or to extend existing languages. A very simple language grammer looks something like this: Rainbow.extend('example', [
{
name: 'keyword',
pattern: /function|return|continue|break/g
}
]);Any pattern used with extend will take precedence over an existing pattern that matches the same block. It will also take precedence over any pattern that is included as part of the generic patterns. For example if you were to call Rainbow.extend('example', [
{
name: 'keyword.magic',
pattern: /function/g
}
]);This would mean that function will be highlighted as Extending existing languagesBy default languages are considered to be standalone, but if you specify an optional third parameter you can have your language inherit from another one. For example the python language grammars inherit from the generic ones: Rainbow.extend('python', [
{
name: 'constant.language',
pattern: /True|False|None/g
}
], 'generic');If you wanted to remove the default boolean values you should be able to do something like this: Rainbow.extend('python', [
{
name: '',
pattern: /true|false/g
}
]);How code is highlightedThe How grammars are definedMatch by nameThe simplest way to define a grammar is to define a regular expression and a name to go along with that. Rainbow.extend([
{
name: 'constant.boolean',
pattern: /true|false/g
}
]);Match by groupThis allows you to take a more complicated regular expression and map certain parts of it to specific scopes. Rainbow.extend([
{
matches: {
1: 'constant.boolean.true',
2: 'constant.boolean.false'
},
pattern: /(true)|(false)/g
}
]);Match by array of sub-patternsFor more complicated matches you may want to process code within another match group. Rainbow.extend([
{
matches: [
{
name: 'constant.boolean.true',
pattern: /true/
},
{
name: 'constant.boolean.false',
pattern: /false/
}
],
pattern: /true|false/g
}
]);Match using another languageSometimes a language supports other languages being embedded inside of it such as JavaScript inside HTML. Rainbow supports that out of the box. Here is an example of how you would highlight PHP tags inside of HTML code. Rainbow.extend('html', [
{
name: 'source.php.embedded',
matches: {
2: {
language: 'php'
}
},
pattern: /<\?(php)?([\s\S]*?)(\?>)/gm
}
]);You should be able to nest sub-patterns as many levels deep as you would like. Extending an existing languageIf you have a language specific pattern that you want highlighted, but it does not exist in the language syntax rules, you can add a rule in your own javascript. Let's say for example you want to highlight PHP's apc functions. You can include the php language then in the markup on your page add: <script>
Rainbow.extend('php', [
{
'matches': {
1: 'support.function'
},
'pattern': /\b(apc_(store|fetch|add|inc))(?=\()/g
}
]);
</script>How Rainbow chooses a matchIn general the best practice is to make your patterns as specific as possible (for example targetting specific keywords). When you create a new language it gets pushed to the front of whatever language it is inheriting from. This means whatever rules are added last will be checked against first. Rainbow chooses the first match it finds for a block. If another pattern overlaps with a pattern that has already been chosen then it is ignored. There is one exception to this. If a match that comes later is more specific (the start AND end points stretch beyond another pattern already matched) then the new match will take precedence and the old one will be discarded. That means if you have a pattern that matches Known limitationsRegular expressions lookbehind assertionsJavascript does not allow positive or negative lookbehind assertions so this means it is possible to have conflicts with the starting and end positions of matches. If you want to match a pattern that ends with a specific character it is recommended that you use a positive lookahead for that character instead of including it in the regex. That allows the same character to be used at the start of another match group without overlapping. Regular expression subgroup matchesYou cannot match part of a subgroup directly to a scope. For example if you have: {
matches: {
1: 'name.attribute',
2: 'value'
},
pattern: /(name=\"(.*?)\")/g
}This will result in code <span class="name attribute">name="value"</span>You see the value class never gets applied. To achieve what you really want you would have to use a subpattern like this: {
name: 'name.attribute',
matches: [{
matches: {
1: 'value'
},
pattern: /\"(.*?)\"/g
}],
pattern: /(name=\"(.*?)\")/g
}This means the entire block is wrapped with That means the entire block will behighlighted as <span class="name attribute">name="<span class="value">value</span>"</span>In this example you could avoid subpatterns completely by using a regex like this to begin with: /(name=)\"(.*?)\"/gRainbow.addAliasThe addAlias function allows you to map a different name to a language. For example: Rainbow.addAlias('js', 'javascript');This allows you to highlight javascript code by using the language |
