##### Highlight

settings Settings arrow_drop_down

- Access1
- Profile2
- Notifications

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s a spin-off from Dabblet and is tested there daily by thousands.

#### Prism

Prism is a simple, lightweight, and easy to use syntax highlighter. It is easily customizable and has support for some plugins to extend its functionality.

Language | Class
HTML | language-markup
CSS | language-css
JavaScript | language-javascript
CoffeeScript | language-coffeescript
PHP | language-php
Ruby | language-ruby
Go | language-go

Here’s a quick example:

HTML, XML

                    <?xml version="1.0"?>
                    <response value="ok" xml:lang="en">
                      <text>Ok</text>
                      <comment html_allowed="true"/>
                      <ns1:description><![CDATA[
                      CDATA is <not> magical.
                      ]]></ns1:description>
                      <a></a> <a/>
                    </response>
                    <!DOCTYPE html>
                    <title>Title</title>
                    <style>body {width: 500px;}</style>
                    <script type="application/javascript">
                      function $init() {return true;}
                    </script>
                    <body>
                      <p checked class="title" id='title'>Title</p>
                      <!-- here goes the rest of the page -->
                    </body>

CSS

                    @media screen and (-webkit-min-device-pixel-ratio: 0) {
                      body:first-of-type pre::after {
                        content: 'highlight: ' attr(class);
                      }
                      body {
                        background: linear-gradient(45deg, blue, red);
                      }
                    }
                    @import url('print.css');
                    @page:right {
                     margin: 1cm 2cm 1.3cm 4cm;
                    }
                    @font-face {
                      font-family: Chunkfive; src: url('Chunkfive.otf');
                    }
                    div.text,
                    #content,
                    li[lang=ru] {
                      font: Tahoma, Chunkfive, sans-serif;
                      background: url('hatch.png') /* wtf? */;  color: #F0F0F0 !important;
                      width: 100%;
                    }

LESS

                    /*
                    Using the most minimal language subset to ensure we
                    have enough relevance hints for proper Less detection
                    */
                    @import "fruits";
                    @rhythm: 1.5em;
                    @media screen and (min-resolution: 2dppx) {
                        body {font-size: 125%}
                    }
                    section > .foo + #bar:hover [href*="less"] {
                        margin:     @rhythm 0 0 @rhythm;
                        padding:    calc(5% + 20px);
                        background: #f00ba7 url(http://placehold.alpha-centauri/42.png) no-repeat;
                        background-image: linear-gradient(-135deg, wheat, fuchsia) !important ;
                        background-blend-mode: multiply;
                    }
                    @font-face {
                        font-family: /* ? */ 'Omega';
                        src: url('../fonts/omega-webfont.woff?v=2.0.2');
                    }
                    .icon-baz::before {
                        display:     inline-block;
                        font-family: "Omega", Alpha, sans-serif;
                        content:     "\f085";
                        color:       rgba(98, 76 /* or 54 */, 231, .75);
                    }

SCSS

                        @import "compass/reset";
                    // variables
                    $colorGreen: #008000;
                    $colorGreenDark: darken($colorGreen, 10);
                    @mixin container {
                        max-width: 980px;
                    }
                    // mixins with parameters
                    @mixin button($color:green) {
                        @if ($color == green) {
                            background-color: #008000;
                        }
                        @else if ($color == red) {
                            background-color: #B22222;
                        }
                    }
                    button {
                        @include button(red);
                    }
                    // nested definitions
                    ul {
                        width: 100%;
                        padding: {
                            left: 5px; right: 5px;
                        }
                      li {
                          float: left; margin-right: 10px;
                          .home {
                              background: url('http://placehold.it/20') scroll no-repeat 0 0;
                        }
                      }
                    }
                    .banner {
                        @extend .container;
                    }
                    a {
                      color: $colorGreen;
                      &:hover { color: $colorGreenDark; }
                      &:visited { color: #c458cb; }
                    }
                    @for $i from 1 through 5 {
                        .span#{$i} {
                            width: 20px*$i;
                        }
                    }
                    @mixin mobile {
                      @media screen and (max-width : 600px) {
                        @content;
                      }
                    }

JavaScript

                    import {x, y} as p from 'point';
                    const ANSWER = 42;
                    class Car extends Vehicle {
                      constructor(speed, cost) {
                        super(speed);
                        var c = Symbol('cost');
                        this[c] = cost;
                        this.intro = `This is a car runs at
                          ${speed}.`;
                      }
                    }
                    for (let num of [1, 2, 3]) {
                    }
                    function $initHighlight(block, flags) {
                      try {
                        if (block.className.search(/\bno\-highlight\b/) != -1)
                          return processBlock(block.function, true, 0x0F) + ' class=""';
                      } catch (e) {
                        /* handle exception */
                        var e4x =
                            Example
                                1234;
                      }
                      for (var i = 0 / 2; i < classes.length; i++) { // "0 / 2" should not be parsed as regexp
                        if (checkCondition(classes[i]) === undefined)
                          return /\d+[\s/]/g;
                      }
                    }
                    export  $initHighlight;

add

- help_outline
- widgets
- today
- mail_outline