// This is a comment with tabs:
// And some spaces:
// And a newline:
Autolinking in raw text: https://prismjs.com
``` -------------------------------- ### Line Numbers with Custom Start (HTML) Source: https://github.com/prismjs/prism/blob/v2/src/plugins/line-numbers/README.md Use the 'data-start' attribute on the pre element to specify a custom starting line number. This example starts numbering from -5. ```html ``` -------------------------------- ### Scss Previewer Examples Source: https://github.com/prismjs/prism/blob/v2/src/plugins/previewers/README.md Demonstrates the integration of previewers with Scss, utilizing variables and interpolation for properties like background-image, transform, color, transition-timing-function, and transition-duration. ```scss $gradient: linear-gradient(135deg, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); $attr: background; .example-gradient { #{$attr}-image: repeating-linear-gradient(10deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1) 10px, rgba(255, 0, 0, 0) 20px); } $angle: 1.8turn; .example-angle { transform: rotate(-3rad) } $color: blue; .example-color { #{$attr}-color: rgba(255, 255, 0, 0.75); } $easing: linear; .example-easing { transition-timing-function: cubic-bezier(0.9, 0.1, .2, .4); } $time: 1s; .example-time { transition-duration: 10s } ``` -------------------------------- ### JavaScript Example Source: https://github.com/prismjs/prism/blob/v2/src/plugins/match-braces/README.md A basic JavaScript function demonstrating brace usage. ```js const func = (a, b) => { return `${a}:${b}`; } ``` -------------------------------- ### Example of Normalized Whitespace Source: https://github.com/prismjs/prism/blob/v2/src/plugins/normalize-whitespace/README.md This example shows how code blocks are rendered after whitespace normalization, including trimming, indenting, and line breaking. ```javascript let example = { foo: true, bar: false }; let there_is_a_very_very_very_very_long_line_it_can_break_it_for_you = true; if (there_is_a_very_very_very_very_long_line_it_can_break_it_for_you === true) { }; ``` -------------------------------- ### Example: Prefix and map classes Source: https://github.com/prismjs/prism/blob/v2/src/plugins/custom-class/README.md Illustrates the combined effect of prefixing and mapping classes on code tokens, showing the transformation from input HTML to output with custom classes. ```javascript Prism.plugins.customClass.map({ keyword: 'special-keyword', string: 'my-string' }); Prism.plugins.customClass.prefix('pr-'); ``` -------------------------------- ### Handling Non-existent Files Source: https://github.com/prismjs/prism/blob/v2/src/plugins/file-highlight/README.md Example showing how an empty `` tag is rendered when the file specified in `data-src` does not exist.
```html
```
--------------------------------
### CSS Example with URL
Source: https://github.com/prismjs/prism/blob/v2/src/plugins/autolinker/README.md
Illustrates how URLs within CSS, specifically in `url()` functions, are autolinked.
```css
@font-face {
src: url(https://lea.verou.me/logo.otf);
font-family: 'LeaVerou';
}
```
--------------------------------
### Plugin JavaScript File
Source: https://github.com/prismjs/prism/blob/v2/src/plugins/file-highlight/README.md
Example of loading the plugin's own JavaScript file using `data-src`.
```html
```
--------------------------------
### Lisp Example
Source: https://github.com/prismjs/prism/blob/v2/src/plugins/match-braces/README.md
A Lisp function for calculating factorial.
```lisp
(defun factorial (n)
(if (= n 0) 1
(* n (factorial (- n 1)))))
```
--------------------------------
### Custom Keyword CSS Example
Source: https://github.com/prismjs/prism/blob/v2/src/plugins/highlight-keywords/README.md
Example CSS rule to style specific keywords like 'if' and 'return' with custom colors. You need to define these rules yourself as the plugin does not include styles.
```css
.token.keyword.keyword-return, .token.keyword.keyword-if {
/* Set the color to a nice red. */
color: #f92672;
}
```
--------------------------------
### Less Previewer Examples
Source: https://github.com/prismjs/prism/blob/v2/src/plugins/previewers/README.md
Illustrates the use of previewers with Less variables and properties for gradients, angles, colors, easing functions, and time durations. Includes vendor-prefixed gradients.
```less
@gradient: linear-gradient(135deg, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%);
.example-gradient {
background: -webkit-linear-gradient(-45deg, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* Chrome10+, Safari5.1+ */
background: -moz-linear-gradient(-45deg, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */
background: -ms-linear-gradient(-45deg, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* IE10+ */
background: -o-linear-gradient(-45deg, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* Opera 11.10+ */
background: linear-gradient(135deg, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* W3C */
}
@angle: 3rad;
.example-angle {
transform: rotate(.4turn)
}
@nice-blue: #5B83AD;
.example-color {
color: hsla(102, 53%, 42%, 0.4);
}
@easing: cubic-bezier(0.1, 0.3, 1, .4);
.example-easing {
transition-timing-function: ease;
}
@time: 1s;
.example-time {
transition-duration: 2s;
}
```
--------------------------------
### Highlight with Line Number Offset
Source: https://github.com/prismjs/prism/blob/v2/src/plugins/line-highlight/README.md
Use `data-line-offset` to adjust the starting line number for highlighting. This example highlights line 43 but starts numbering from line 41.
```markup
```
--------------------------------
### JavaScript Example with Links
Source: https://github.com/prismjs/prism/blob/v2/src/plugins/autolinker/README.md
Shows various types of links (URLs, emails, Markdown links) within JavaScript comments and code.
```javascript
/**
* Prism: Lightweight, robust, elegant syntax highlighting
* MIT license https://www.opensource.org/licenses/mit-license.php/
* @author Lea Verou https://lea.verou.me
* Reach Lea at fake@email.com (no, not really)
* And this is [a Markdown link](https://prismjs.com). Sweet, huh?
*/
let foo = 5;
// And a single line comment https://google.com
```
--------------------------------
### Markup Attribute Example
Source: https://github.com/prismjs/prism/blob/v2/src/plugins/previewers/README.md
Shows how previewers can be triggered by values within HTML attributes, such as 'bgcolor' and 'style'.
```html