# HiliteJs Demo: Web Scripting

## JavaScript

    const myClass = new class {
    	constructor() {
    		const _class = this;
    		const $initHighlight = function(block, cls) {
    		  var myVar = false;
    		  let otherVar = true;
    		  const myObj = null;
    		  try {
    			if (cls.search(/\bno\-highlight\b/) != -1)
    			  return process(block, true, 0x0F) +
    					 ` class="${cls}"`;
    		  } catch (e) {
    			/* handle exception */
    			return e;
    		  }
    		  for (var i = 0 / 2; i < classes.length; i++) {
    			if (checkCondition(classes[i]) == undefined) {
    			  console.warn('undefined');
    			} else {
    				console.log("OK");
    			} //end if
    		  } //end for
    		  return null;
    		};
    		_class.$initHighlight = $initHighlight; // export as public
    	}
    };
    export myClass;

## JSON

    [
      {
        "title": "apples",
        "count": [12000, 20000, "string"],
        "description": {"text": "...", "sensitive": false}
      },
      {
        "title": "oranges",
        "count": [17500, null, "another\" string"],
        "description": {"text": "...", "sensitive": true}
      }
    ]

## YAML

    ---
    # comment
    string_1: "Bar"
    string_2: 'bar'
    string_3: bar
    inline_keys_ignored: sompath/name/file.jpg
    keywords_in_yaml:
      - true
      - false
      - TRUE
      - FALSE
      - 21
      - 21.0
      - !!str 123
    "quoted_key": &foobar
      bar: foo
      foo:
      "foo": bar

    reference: *foobar

    multiline_1: "
      Multiline string
      "
    multiline_2: |
      Multiline
      String
    multiline_3: >
      Multiline
      String

    array_nested:
    - a
    - b: 1
      c: 2
    - b
    - comment

## INI (settings)

    ; boilerplate
    [package]
    name = "some_name"
    authors = ["Author"]
    description = "This is a description"

    [[lib]]
    name = ${NAME}
    default = True
    auto = no
    counter = 1000

## PHP

    <?php

    require_once 'Zend/Uri/Http.php';

    namespace Location\Web;

    use \MyNamespace;

    final class MyClass {

    	public $prop1 = null;
    	protected $prop2 = false;
    	private $prop3 = [];

    	public function __construct(?string $what) {
    		$this->prop1 = (string) $what;
    		$this->prop2 = (bool) true;
    		$this->prop3 = [
    			'id' => (int) 100,
    			'val' => (float) 3.14,
    			'data' => (array) $_SERVER,
    		];
    	}

    	public function __destruct() {
    		$this->clearData();
    	}

    	public function getProp2() {
    		return (array) $this->prop2;
    	}

    	protected function getProp3() {
    		return (array) $this->prop3;
    	}

    	private function clearData() {
    		$this->prop1 = null;
    		$this->prop2 = false;
    		$this->prop3 = [];
    	}

    }

    interface Factory {
        static function _factory();
    }

    abstract class URI extends BaseURI implements Factory {
        abstract function test();

        public static $st1 = 1;
        const ME = "Yo";
        var $list = NULL;
        private $var;

        /**
         * Returns a URI
         *
         * @return URI
         */
        final static public function _factory($stats = array(), $uri = 'http', $arr = []) {
            static::$st1 = 1;

            echo __METHOD__.' => '.__CLASS__.'::'.__FUNCTION__.' # '.__DIR__.' '.__FILE__.' # '.__LINE__;

            $uri = explode(':', $uri, 0b10);
            $schemeSpecific = (string) isset($uri[1]) ? $uri[1] : '';

            $desc = 'Multi
    line description';

    $heredoc = <<<'H-SYNTAX'
    This is 'another'
    "syntax" that is supported in PHP for strings ...
    H-SYNTAX;

            // Security check
            if (!ctype_alnum($scheme)) {
                throw new Zend_Uri_Exception('Illegal scheme');
            }

            $this->var = (int) (float) 0 - self::$st;
            $this->list = list(Array("1"=> 2, 2=>self::ME, 3 => \Location\Web\URI::class));

            $var1 = (bool) true;
            $var2 = (bool) false;
            $var3 = (array) [1, 'a', [3]];
            $var4 = null;

            return array(
                'uri'   => $uri,
                'value' => null,
            );
        }
    }

    function myFunction($param1, $param2=[]) {

        // initialize
        $isTrue = false;

        // create curl resource
        $ch = curl_init();

        // set url
        curl_setopt($ch, CURLOPT_URL, "example.com");

        //return the transfer as a string
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

        // $output contains the output string
        $output = curl_exec($ch);

        // close curl resource to free up system resources
        curl_close($ch);

    } //end function

    echo URI::ME . URI::$st1;

    __halt_compiler () ; datahere
    datahere
    datahere */
    datahere

## MongoDB

    {
    	"tag": {
    		"$not": {
    			"$eq": "<positive-integer>"
    		}
    	},
    	"type": "page",
    	"size": {
    		"$gt": 3
    	},
    	"extra": null,
    	"active": true
    }

## SQL

    CREATE TABLE "topic" (
        "id" serial NOT NULL PRIMARY KEY,
        "forum_id" integer NOT NULL,
        "subject" varchar(255) NOT NULL
    );
    ALTER TABLE "topic"
    ADD CONSTRAINT forum_id FOREIGN KEY ("forum_id")
    REFERENCES "forum" ("id");

    -- Initials
    insert into "topic" ("forum_id", "subject")
    values (2, 'D''artagnian');

## PostgreSQL specific SQL with PL/PgSQL

    -- Sample PostgreSQL Functions

    BEGIN;
    SELECT sum("salary") OVER w, avg("salary") OVER w
      FROM "empsalary"
      WINDOW w AS (PARTITION BY "depname" ORDER BY "salary" DESC);
    END;

    CREATE FUNCTION days_of_week() RETURNS SETOF text AS $$
    BEGIN
      FOR i IN 7 .. 13 LOOP
        RETURN NEXT to_char(to_date(i::text,'J'),'TMDy');
      END LOOP;
    END;
    $$ STABLE LANGUAGE plpgsql;

    CREATE TABLE test_url (url varchar NOT NULL, url_tsvector tsvector NOT NULL);
    CREATE OR REPLACE FUNCTION generate_url_tsvector(varchar)
    RETURNS tsvector
    LANGUAGE sql
    AS $_$
      SELECT to_tsvector(regexp_replace($1, '[^\w]+', ' ', 'gi'));
    $_$;

    CREATE OR REPLACE FUNCTION before_insert_test_url()
    RETURNS TRIGGER
    LANGUAGE plpgsql AS $_$
    BEGIN
      NEW.url_tsvector := generate_url_tsvector(NEW.url);
      RETURN NEW;
    END
    $_$;

    -- Sample PostgreSQL statements

    SELECT "id", "data"#>>'{level1,level2,0}' || '.' FROM "public"."test_table" ORDER BY "data"->>'id' ASC

    insert into "escape_test" (text) values (E'This is the first part \\n And this is the second');

## Markdown

    # hello world

    you can write text [with links](http://example.com) inline or [link references][1].

    * one _thing_ has *em*phasis
    * two __things__ are **bold**

    [1]: http://example.com

    ---

    hello world
    ===========

    <this_is inline="xml"></this_is>

    > markdown is so cool

        so are code segments

    1. one thing (yeah!)
    2. two thing `i can write code`, and `more` wipee!

## HTML

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Title</title>
      <style>
        body {
          width: 500px;
        }
      </style>
    </head>
    <body>
      <img src="test.png" width="160" height="120" >
      <p checked class="title" id='title'>Title</p>
      <!-- here goes the rest of the page -->
      <script type="application/javascript">
        function $init(){
          return true;
        } //end function
      </script>
    </body>
    </html>

## CSS (style sheet)

    @font-face {
      font-family: Chunkfive; src: url('Chunkfive.otf');
    }

    body, .usertext {
      color: #F0F0F0; background: #600;
      font-family: Chunkfive, sans;
    }

    @import url(print.css);
    @media print {
      a[href^=http]::after {
        content: attr(href)
      }
    }

## Less (style sheet)

    @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 (style sheet)

    @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);
    }

    div,
    .navbar,
    #header,
    input[type="input"] {
        font-family: "Helvetica Neue", Arial, sans-serif;
        width: auto;
        margin: 0 auto;
        display: block;
    }

    .row-12 > [class*="spans"] {
        border-left: 1px solid #B5C583;
    }

    // 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;
      }
    }

## Diff (unified)

    Index: languages/ini.js
    ===================================================================
    --- languages/ini.js    (revision 199)
    +++ languages/ini.js    (revision 200)
    @@ -1,8 +1,7 @@
     hljs.LANGUAGES.ini =
     {
       case_insensitive: true,
    -  defaultMode:
    -  {
    +  defaultMode: {
         contains: ['comment', 'title', 'setting'],
         illegal: '[^\\s]'
       },

    *** /path/to/original timestamp
    --- /path/to/new      timestamp
    ***************
    *** 1,3 ****
    --- 1,9 ----
    + This is an important
    + notice! It should
    + therefore be located at
    + the beginning of this
    + document!

    ! compress the size of the
    ! changes.

      It is important to spell