### CodeMirror v3 Gutter Setup and Marker Addition (JavaScript)

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/doc/upgrade_v3.html

Demonstrates how to initialize CodeMirror with multiple gutters, including custom ones, and how to add markers to a specific gutter. This replaces the older single-gutter model and setMarker method.

```javascript
var cm = new CodeMirror(document.body, {
    gutters: ["note-gutter", "CodeMirror-linenumbers"],
    lineNumbers: true
  });
  // Add a note to line 0
  cm.setGutterMarker(0, "note-gutter", document.createTextNode("hi"));
```

--------------------------------

### Properties File Syntax Example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/properties/index.html

An example of a properties file format supported by the mode, showcasing key-value pairs, comments using '#' or '!', multi-line values with backslashes, and Unicode escape sequences.

```properties
# This is a properties file
a.key = A value
another.key = http://example.com
! Exclamation mark as comment
but.not=Within ! A value
# indeed
# Spaces at the beginning of a line
spaces.before.key=value
backslash=Used for multi\ line entries,\
that's convenient.
# Unicode sequences
unicode.key=This is \u0020 Unicode
no.multiline=here
# Colons
colons : can be used too
# Spaces
spaces\ in\ keys=Not very common...
```

--------------------------------

### Initialize CodeMirror Editor

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/doc/manual.html

Demonstrates the basic initialization of a CodeMirror editor. The first example appends an editor to the document body with default settings. The second example shows how to pass a configuration object to customize the editor's initial value and mode.

```javascript
var myCodeMirror = CodeMirror(document.body);

var myCodeMirror = CodeMirror(document.body, {
  value: "function myScript(){return 100;}\n",
  mode:  "javascript"
});
```

--------------------------------

### SLIM syntax demonstration

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/slim/index.html

A collection of SLIM template syntax examples showcasing tag definitions, attributes, interpolation, and comment handling.

```slim
body
  table
    - for user in users
      td id="user_#{user.id}" class=user.role
        a href=user_action(user, :edit) Edit #{user.name}
        a href=(path_to_user user) = user.name

body
  h1(id="logo") = page_logo
  h2[id="tagline" class="small tagline"] = page_tagline
  / comment
  /! html comment
  <!-- html comment -->
  <a href="#{'hello' if set}">link</a>
  a.slim href="work" disabled=false running==:atom
  Text <b>bold</b>
  .clazz data-id="test" == 'hello' unless quark
  | Text mode #{12}
  Second line = x ||= :ruby_atom
```

--------------------------------

### YAML Syntax Examples

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/yaml/index.html

A collection of YAML syntax patterns including lists, key-value pairs, inline blocks, and multi-line strings. These examples demonstrate the structure supported by the CodeMirror YAML mode.

```yaml
---
# Favorite movies
- Casablanca
- North by Northwest
- The Man Who Wasn't There
---
# Shopping list
[milk, pumpkin pie, eggs, juice]
---
# Indented Blocks
name: John Smith
age: 33
---
# Inline Blocks
{name: John Smith, age: 33}
---
receipt: Oz-Ware Purchase Invoice
date: 2007-08-06
customer:
  given: Dorothy
  family: Gale
items:
  - part_no: A4786
    descrip: Water Bucket (Filled)
    price: 1.47
    quantity: 4
  - part_no: E1628
    descrip: High Heeled "Ruby" Slippers
    size: 8
    price: 100.27
    quantity: 1
bill-to: &id001
  street: |
    123 Tornado Alley
    Suite 16
  city: East Centerville
  state: KS
ship-to: *id001
specialDelivery: >
  Follow the Yellow Brick Road to the Emerald City.
  Pay no attention to the man behind the curtain.
...
```

--------------------------------

### SCSS Syntax Example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/css/scss.html

A comprehensive example of SCSS syntax demonstrating variables, nesting, mixins, and inheritance. This code is used to test the parsing and highlighting capabilities of the SCSS mode.

```scss
$variable: #333;
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  #nested {
    background-color: black;
  }
  border-color: $blue;
  color: darken($blue, 9%);
}

@mixin table-base {
  th { text-align: center; font-weight: bold; }
  td, th {padding: 2px}
}

.nested {
  @include border-radius(3px);
  @extend .big;
  p {
    background: whitesmoke;
    a { color: red; }
  }
}
```

--------------------------------

### Example Dockerfile content

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/dockerfile/index.html

A sample Dockerfile demonstrating the syntax that the CodeMirror mode is designed to highlight, including common instructions like FROM, RUN, and CMD.

```dockerfile
# Install Ghost blogging platform and run development environment
# VERSION 1.0.0
FROM ubuntu:12.10
MAINTAINER Amer Grgic "amer@livebyt.es"
WORKDIR /data/ghost
RUN apt-get update
RUN apt-get install -y python g++ make software-properties-common --force-yes
RUN add-apt-repository ppa:chris-lea/node.js
RUN apt-get update
RUN apt-get install -y unzip
RUN apt-get install -y curl
RUN apt-get install -y rlwrap
RUN apt-get install -y nodejs
RUN curl -L https://ghost.org/zip/ghost-latest.zip -o /tmp/ghost.zip
RUN unzip -uo /tmp/ghost.zip -d /data/ghost
ADD ./config.example.js /data/ghost/config.js
RUN cd /data/ghost/ && npm install --production
EXPOSE 2368
CMD ["npm","start"]
```

--------------------------------

### Lua Syntax Highlighting Example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/lua/index.html

A demonstration of Lua syntax highlighting, including multiline comments, tables, conditional logic, and string handling.

```lua
--[[ example useless code to show lua syntax highlighting this is multiline comment ]]
function blahblahblah(x)
	local table = { "asd" = 123, "x" = 0.34, }
	if x ~= 3 then
		print( x )
	elseif x == "string"
		my_custom_function( 0x34 )
	else
		unknown_function( "some string" )
	end
	--single line comment
end

function blablabla3()
	for k,v in ipairs( table ) do
		--abcde..
		y=[=[ x=[[ x is a multi line string ]] but its definition is iside a highest level string! ]=]
		print(" \"\" ")
		s = math.sin( x )
	end
end
```

--------------------------------

### Example Python Syntax

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/python/index.html

A sample snippet demonstrating Python syntax including decorators, class inheritance, static methods, and string manipulation.

```python
import os
from package import ParentClass

@nonsenseDecorator
def doesNothing():
    pass

class ExampleClass(ParentClass):
    @staticmethod
    def example(inputStr):
        a = list(inputStr)
        a.reverse()
        return ''.join(a)

    def __init__(self, mixin = 'Hello'):
        self.mixin = mixin
```

--------------------------------

### GNU Assembler Syntax Example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/gas/index.html

A sample snippet demonstrating the syntax supported by the Gas mode, including directives, labels, and comments.

```assembly
.syntax unified
.global main

/*
 * A
 * multi-line
 * comment.
 */
@ A single line comment.

main:
  push {sp, lr}
  ldr r0, =message
  bl puts
  mov r0, #0
  pop {sp, pc}

message:
  .asciz "Hello world!<br />"
```

--------------------------------

### Rust Syntax Example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/rust/index.html

A sample snippet of Rust code demonstrating type definitions, enums, and pattern matching used for testing the mode.

```rust
type foo<T> = int;
enum bar { some(int, foo<float>), none }
fn check_crate(x: int) {
	let v = 10;
	match foo {
		1 ... 3 { print_foo(); if x { blah().to_string(); } }
		(x, y) { "bye" }
		_ { "hi" }
	}
}
```

--------------------------------

### TTCN-CFG Configuration Example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/ttcn-cfg/index.html

An example of a TTCN-CFG configuration file structure, including sections for module parameters, logging settings, and test port definitions.

```text/x-ttcn-cfg
[MODULE_PARAMETERS]
[LOGGING]
LogFile := "logs/%e.%h-%r.%s"
FileMask := LOG_ALL | DEBUG | MATCHING
ConsoleMask := ERROR | WARNING | TESTCASE | STATISTICS | PORTEVENT
LogSourceInfo := Yes
AppendFile := No
TimeStampFormat := DateTime
LogEventTypes := Yes
SourceInfoFormat := Single
LogEntityName := Yes
[TESTPORT_PARAMETERS]
[DEFINE]
[INCLUDE]
[EXTERNAL_COMMANDS]
BeginTestCase := ""
EndTestCase := ""
BeginControlPart := ""
EndControlPart := ""
[EXECUTE]
[GROUPS]
[COMPONENTS]
[MAIN_CONTROLLER]
TCPPort := 0
KillTimer := 10.0
NumHCs := 0
LocalAddress :=
```

--------------------------------

### Mathematica Syntax Example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/mathematica/index.html

A sample Mathematica function definition demonstrating the syntax supported by the mode, including comments, variable declarations, and algebraic operations.

```mathematica
(* example Mathematica code *)
dualize::"singular" = "Q must be regular: found Det[Q]==0.";
dualize[ Q_, p_ ] := Block[ { m, n, xv, lv, uv, vars, polys, dual },
  If[Det[Q] == 0,
    Message[dualize::"singular"],
    m = Length[p];
    n = Length[Q] - 1;
    xv = Table[Subscript[x, i], {i, 0, n}];
    lv = Table[Subscript[l, i], {i, 1, m}];
    uv = Table[Subscript[u, i], {i, 0, n}];
    If[m == 0, polys = Q.uv, polys = Join[p, Q.uv - Transpose[Outer[D, p, xv]].lv] ];
    vars = Join[xv, lv];
    dual = GroebnerBasis[polys, uv, vars];
    ReplaceAll[dual, Rule[u, x]]
  ]
]
```

--------------------------------

### Soy Template Syntax Example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/soy/index.html

A sample Closure Template (Soy) file demonstrating namespace declaration, template definition, parameters, and conditional logic.

```soy
{namespace example}

/**
 * Says hello to the world.
 */
{template .helloWorld}
  {@param name: string}
  {@param? score: number}
  Hello <b>{$name}</b>!
  <div>
    {if $score}
      <em>{$score} points</em>
    {else}
      no score
    {/if}
  </div>
{/template}

{template .alertHelloWorld kind="js"}
  alert('Hello World');
{/template}
```

--------------------------------

### VBScript Syntax Example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/vbscript/index.html

A sample VBScript code block demonstrating basic syntax including constants, subroutine calls, and conditional logic.

```vbscript
' Pete Guhl ' 03-04-2012 ' ' Basic VBScript support for codemirror2
Const ForReading = 1, ForWriting = 2, ForAppending = 8

Call Sub020_PostBroadcastToUrbanAirship(strUserName, strPassword, intTransmitID, strResponse)

If Not IsNull(strResponse) AND Len(strResponse) = 0 Then
	boolTransmitOkYN = False
Else
	' WScript.Echo "Oh Happy Day! Oh Happy DAY!"
	boolTransmitOkYN = True
End If
```

--------------------------------

### RequireJS Example for Loading CodeMirror

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/doc/manual.html

Demonstrates how to use RequireJS to dynamically load CodeMirror and its associated modes. It initializes an editor instance from a textarea element with specified line numbers and mode.

```javascript
require([
  "cm/lib/codemirror", "cm/mode/htmlmixed/htmlmixed"
], function(CodeMirror) {
  CodeMirror.fromTextArea(document.getElementById("code"), {
    lineNumbers: true,
    mode: "htmlmixed"
  });
});
```

--------------------------------

### ASN.1 Syntax Example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/asn.1/index.html

A sample snippet demonstrating the structure of an ASN.1 module definition, including sequences, object identifiers, and bit strings.

```asn1
-- Sample ASN.1 Code --
MyModule DEFINITIONS ::= BEGIN
  MyTypes ::= SEQUENCE {
    myObjectId OBJECT IDENTIFIER,
    mySeqOf SEQUENCE OF MyInt,
    myBitString BIT STRING { muxToken(0), modemToken(1) }
  }
  MyInt ::= INTEGER (0..65535)
END
```

--------------------------------

### Fortran Example Program

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/fortran/index.html

A sample Fortran program demonstrating basic input/output, array allocation, and mathematical operations like calculating averages. This code serves as a test case for the Fortran syntax highlighting mode.

```fortran
program average
! Read in some numbers and take the average
implicit none
real, dimension(:), allocatable :: points
integer :: number_of_points
real :: average_points=0., positive_average=0., negative_average=0.
write (*,*) "Input number of points to average:"
read (*,*) number_of_points
allocate (points(number_of_points))
write (*,*) "Enter the points to average:"
read (*,*) points
if (number_of_points > 0) average_points = sum(points) / number_of_points
if (count(points > 0.) > 0) then
  positive_average = sum(points, points > 0.) / count(points > 0.)
end if
if (count(points < 0.) > 0) then
  negative_average = sum(points, points < 0.) / count(points < 0.)
end if
deallocate (points)
write (*,'(a,g12.4)') 'Average = ', average_points
write (*,'(a,g12.4)') 'Average of positive points = ', positive_average
write (*,'(a,g12.4)') 'Average of negative points = ', negative_average
end program average
```

--------------------------------

### Twig syntax example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/twig/index.html

A sample snippet demonstrating Twig template syntax including extends, blocks, loops, conditionals, and variable interpolation.

```twig
{% extends "layout.twig" %} {% block title %}CodeMirror: Twig mode{% endblock %} {# this is a comment #} {% block content %} {% for foo in bar if foo.baz is divisible by(3) %} Hello {{ foo.world }} {% else %} {% set msg = "Result not found" %} {% include "empty.twig" with { message: msg } %} {% endfor %} {% endblock %}
```

--------------------------------

### CodeMirror Search Cursor Implementation

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/doc/manual.html

Adds a getSearchCursor method to CodeMirror instances for implementing search and replace. It supports string and regex queries, customizable start positions, and case-insensitive matching. The search cursor object provides methods to find, get match boundaries, and replace.

```javascript
getSearchCursor(query, start, caseFold) → cursor
```

```javascript
cursor.findNext() → boolean
```

```javascript
cursor.findPrevious() → boolean
```

```javascript
cursor.from() → {line, ch}
```

```javascript
cursor.to() → {line, ch}
```

```javascript
cursor.replace(text: string, ?origin: string)
```

--------------------------------

### PHP Code Example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/php/index.html

An example of PHP code embedded within HTML, demonstrating variable output, function calls, and comments. This snippet is intended for display and understanding PHP syntax within a web context.

```php
<?php $a = array('a' => 1, 'b' => 2, 3 => 'c'); echo "$a[a] ${a[3] /* } comment */} {$a[b]} \$a[a]"; function hello($who) { return "Hello $who!"; } ?> <p>The program says <?= hello("World") ?>.</p> <script> alert("And here is some JS code"); // also colored </script>
```

--------------------------------

### Asterisk Dialplan Configuration Example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/asterisk/index.html

A sample configuration file (extensions.conf) demonstrating the syntax for Asterisk dialplans, including contexts, extensions, and various dialplan applications like Dial, Playback, and Goto.

```asterisk
[general]
static=yes
#include "/etc/asterisk/additional_general.conf"

[demo]
exten => s,1,Wait(1)
same => n,Answer
same => n,Set(TIMEOUT(digit)=5)
same => n,BackGround(demo-congrats)
exten => 1000,1,Goto(default,s,1)
exten => 1234,1,Playback(transfer,skip)
exten => 1234,n,Gosub(${EXTEN},stdexten(${GLOBAL(CONSOLE)}))
```

--------------------------------

### Implement Application Delegate in Objective-C

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/clike/index.html

Provides a basic example of an Objective-C class implementation, including method definition and C-style array usage.

```objective-c
/* This is a longer comment
   That spans two lines */
#import <Test/Test.h>

@implementation YourAppDelegate
// This is a one-line comment
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{
	char myString[] = "This is a C character array";
	int test = 5;
	return YES;
}
```

--------------------------------

### Example Cython Syntax

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/python/index.html

A sample snippet demonstrating Cython syntax, including C-style type declarations and performance optimizations like bounds checking suppression.

```cython
import numpy as np
cimport cython
from libc.math cimport sqrt

@cython.boundscheck(False)
@cython.wraparound(False)
def pairwise_cython(double[:, ::1] X):
    cdef int M = X.shape[0]
    cdef int N = X.shape[1]
    cdef double tmp, d
    cdef double[:, ::1] D = np.empty((M, M), dtype=np.float64)
    for i in range(M):
        for j in range(M):
            d = 0.0
            for k in range(N):
                tmp = X[i, k] - X[j, k]
                d += tmp * tmp
            D[i, j] = sqrt(d)
    return np.asarray(D)
```

--------------------------------

### Handlebars Template Syntax Example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/handlebars/index.html

A demonstration of Handlebars template syntax, including partials, helpers, conditional blocks, and comment structures used within the editor.

```handlebars
{{> breadcrumbs}}
{{!-- You can use the t function to get content translated to the current locale, es: {{t 'article_list'}} --}}
<h1>{{t 'article_list'}}</h1>
{{! one line comment }}
{{#each articles}}
  {{~title}}
  <p>{{excerpt body size=120 ellipsis=true}}</p>
  {{#with author}}
    written by {{first_name}} {{last_name}} from category: {{../category.title}}
    {{#if @../last}}foobar!{{/if}}
  {{/with~}}
  {{#if promoted.latest}}Read this one! {{else}} This is ok! {{/if}}
  {{#if @last}}<hr>{{/if}}
{{/each}}
{{#form new_comment}}
  <input type="text" name="body">
{{/form}}
```

--------------------------------

### SPARQL query syntax example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/sparql/index.html

A sample SPARQL query demonstrating various features such as prefixes, SELECT clauses, UNION, MINUS, and FILTER operations. This serves as a test case for the CodeMirror SPARQL syntax highlighter.

```sparql
PREFIX a: <http://www.w3.org/2000/10/annotation-ns#>
PREFIX dc: <http://purl.org/dc/elements/1.1/>
PREFIX foaf: <http://xmlns.com/foaf/0.1/>
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>

# Comment!
SELECT ?given ?family WHERE {
  { 
    ?annot a:annotates <http://www.w3.org/TR/rdf-sparql-query/> .
    ?annot dc:creator ?c .
    OPTIONAL {?c foaf:givenName ?given ; foaf:familyName ?family }
  } 
  UNION { 
    ?c !foaf:knows/foaf:knows? ?thing.
    ?thing rdfs 
  } 
  MINUS { ?thing rdfs:label "剛柔流"@jp }
  FILTER isBlank(?c)
}
```

--------------------------------

### Elm Language Syntax Example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/elm/index.html

A sample Elm script demonstrating graphics and signal handling, used to test the Elm mode syntax highlighting capabilities.

```elm
import Color exposing (..)
import Graphics.Collage exposing (..)
import Graphics.Element exposing (..)
import Time exposing (..)

main = Signal.map clock (every second)

clock t = collage 400 400
  [ filled lightGrey (ngon 12 110)
  , outlined (solid grey) (ngon 12 110)
  , hand orange 100 t
  , hand charcoal 100 (t/60)
  , hand charcoal 60 (t/720)
  ]

hand clr len time = 
  let angle = degrees (90 - 6 * inSeconds time)
  in segment (0,0) (fromPolar (len,angle)) |> traced (solid clr)
```

--------------------------------

### LESS syntax example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/css/less.html

A collection of LESS syntax features including mixins, variables, nested rules, and media queries used for testing the highlighter.

```less
@media screen and (device-aspect-ratio: 16/9) { … }
.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}
@light-blue: hsl(190, 50%, 65%);
#menu {
  position: absolute;
  &:hover {
    background-color: @blue;
  }
  #dropdown {
    display: none;
    ul { padding: 0px; }
  }
}
```

--------------------------------

### SQL Syntax Example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/sql/index.html

A sample SQL query demonstrating various syntax elements supported by the CodeMirror SQL mode, including comments, numeric literals, hex/binary values, and date formats.

```sql
-- SQL Mode for CodeMirror
SELECT SQL_NO_CACHE DISTINCT @var1 AS `val1`, @'val2', @global.'sql_mode', 1.1 AS `float_val`, .14 AS `another_float`, 0.09e3 AS `int_with_esp`, 0xFA5 AS `hex`, x'fa5' AS `hex2`, 0b101 AS `bin`, b'101' AS `bin2`, DATE '1994-01-01' AS `sql_date`, { T "1994-01-01" } AS `odbc_date`, 'my string', _utf8'your string', N'her string', TRUE, FALSE, UNKNOWN FROM DUAL
-- space needed after '--'
# 1 line comment
/* multiline comment! */
LIMIT 1 OFFSET 0;
```

--------------------------------

### Hxml Configuration Example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/haxe/index.html

Illustrates Hxml syntax used for configuring the Haxe compiler. This snippet shows compiler flags, library inclusion, conditional compilation, and command execution.

```hxml
-cp test
-js path/to/file.js
#-remap nme:flash
--next
-D source-map-content
-cmd 'test'
-lib lime
```

--------------------------------

### Sass Syntax Example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/sass/index.html

A sample Sass snippet demonstrating variable definitions and nested style rules. This code is intended to be parsed by the CodeMirror Sass mode.

```sass
// Variable Definitions
$page-width: 800px
$sidebar-width: 200px
$primary-color: #eeeeee

// Global Attributes
body
  font:
    family: sans-serif
    size: 30em
    weight: bold

// Scoped Styles
#contents
  width: $page-width

#sidebar
  float: right
  width: $sidebar-width

#main
  width: $page-width - $sidebar-width
  background: $primary-color
  h2
    color: blue

#footer
  height: 200px
```

--------------------------------

### Manage VIM mode options

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/doc/manual.html

Methods for getting and setting configuration options within the VIM mode, such as key bindings or behavior settings.

```javascript
// Set a VIM option
CodeMirror.Vim.setOption("hlsearch", true);

// Get a VIM option
var searchEnabled = CodeMirror.Vim.getOption("hlsearch");
```

--------------------------------

### Jade Template Syntax Example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/jade/index.html

A sample Jade template demonstrating common syntax elements such as doctype declaration, tag nesting, attribute assignment, and conditional logic.

```jade
doctype html
html
  head
    title= "Jade Templating CodeMirror Mode Example"
    link(rel='stylesheet', href='/css/bootstrap.min.css')
  body
    div.header
      h1 Welcome to this Example
    div.spots
      if locals.spots
        each spot in spots
          div.spot.well
            div
              if spot.logo
                img.img-rounded.logo(src=spot.logo)
              else
                img.img-rounded.logo(src="img/placeholder.png")
              h3
                a(href=spot.hash) ##{spot.hash}
              if spot.title
                span.title #{spot.title}
      else
        h3 There are no spots currently available.
```

--------------------------------

### Pig Latin Language Syntax Example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/pig/index.html

A sample script demonstrating Apache Pig syntax, including multiline comments, data loading with PigStorage, grouping operations, and data storage.

```pig
-- Apache Pig (Pig Latin Language) Demo
/* This is a multiline comment. */
a = LOAD "\path\to\input" USING PigStorage('\t') AS (x:long, y:chararray, z:bytearray);
b = GROUP a BY (x,y,3+4);
c = FOREACH b GENERATE flatten(group) as (x,y), SUM(group.$2) as z;
STORE c INTO "\path\to\output"; --
```

--------------------------------

### Java HTTP Server Implementation with Netty

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/clike/index.html

Implements an HTTP server using Netty. It sets up server bootstrap, event loop groups, and a pipeline initializer. The server can be started and stopped gracefully.

```java
package org.wasabi.http import java.util.concurrent.Executors import java.net.InetSocketAddress import org.wasabi.app.AppConfiguration import io.netty.bootstrap.ServerBootstrap import io.netty.channel.nio.NioEventLoopGroup import io.netty.channel.socket.nio.NioServerSocketChannel import org.wasabi.app.AppServer public class HttpServer(private val appServer: AppServer) { val bootstrap: ServerBootstrap val primaryGroup: NioEventLoopGroup val workerGroup: NioEventLoopGroup init { // Define worker groups primaryGroup = NioEventLoopGroup() workerGroup = NioEventLoopGroup() // Initialize bootstrap of server bootstrap = ServerBootstrap() bootstrap.group(primaryGroup, workerGroup) bootstrap.channel(javaClass<NioServerSocketChannel>()) bootstrap.childHandler(NettyPipelineInitializer(appServer)) } public fun start(wait: Boolean = true) { val channel = bootstrap.bind(appServer.configuration.port)?.sync()?.channel() if (wait) { channel?.closeFuture()?.sync() } } public fun stop() { // Shutdown all event loops primaryGroup.shutdownGracefully() workerGroup.shutdownGracefully() // Wait till all threads are terminated primaryGroup.terminationFuture().sync() workerGroup.terminationFuture().sync() } }
```

--------------------------------

### DTD Syntax Example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/dtd/index.html

A sample DTD structure demonstrating entity definitions, element declarations, and attribute lists. This is used to test the syntax highlighting capabilities of the DTD mode.

```xml
<!DOCTYPE xsl:stylesheet [
  <!ENTITY nbsp "&#160;">
  <!ENTITY copy "&#169;">
]>
<!ELEMENT title (#PCDATA|emphasis|code)*>
<!ATTLIST title 
  xmlns CDATA #FIXED "http://docbook.org/ns/docbook"
  role CDATA #IMPLIED
>
```

--------------------------------

### HAML Syntax Example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/haml/index.html

A collection of HAML syntax patterns including tags, attributes, Ruby interpolation, and comments. This demonstrates the language features supported by the CodeMirror HAML mode.

```haml
!!!
#content.left.column(title="title"){:href => "/hello", :test => "#{hello}_#{world}"}
  %h2 Welcome to our site!
  %p= puts "HAML MODE"
.right.column
  = render :partial => "sidebar"
.container
  .row
    .span8
      %h1.title= @page_title
      %p.title= @page_title
      %p
        / The same as HTML comment
        Hello
        -# haml comment
        - now = DateTime.now
        - if now > DateTime.parse("December 31, 2006")
          = "Happy new " + "year!"
```

--------------------------------

### CSS Styling for CodeMirror Components

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/doc/manual.html

Example CSS selectors used to customize the appearance of CodeMirror elements, including line numbers, the cursor, and bracket highlighting.

```css
.CodeMirror-linenumbers { text-align: right; }
.CodeMirror-cursor { border-left: 1px solid black; }
.CodeMirror-selected { background: #d9d9d9; }
.CodeMirror-matchingbracket { color: green; }
```

--------------------------------

### NSIS Syntax Highlighting Example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/nsis/index.html

A sample NSIS script demonstrating common directives, conditional logic, and message boxes. This code is intended to be parsed by the CodeMirror NSIS mode for syntax highlighting.

```nsis
; This is a comment
!ifdef ERROR
  !error "Something went wrong"
!endif

OutFile "demo.exe"
RequestExecutionLevel user
!include "LogicLib.nsh"

Section -mandatory
  ${If} 1 > 0
    MessageBox MB_OK "Hello world"
  ${EndIf}
SectionEnd
```

--------------------------------

### TypeScript Greeter Example with CodeMirror

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/javascript/typescript.html

Demonstrates a simple TypeScript class 'Greeter' and its usage, including creating a button to trigger the greeting. This code is intended to be used within a CodeMirror editor configured for TypeScript.

```typescript
class Greeter {
  greeting: string;
  constructor (message: string) {
    this.greeting = message;
  }
  greet() {
    return "Hello, " + this.greeting;
  }
}

var greeter = new Greeter("world");
var button = document.createElement('button')
button.innerText = "Say Hello"
button.onclick = function() {
  alert(greeter.greet())
}
document.body.appendChild(button)
```

--------------------------------

### RPM Spec File Content Example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/rpm/index.html

An example of a typical RPM spec file. These files are used to build RPM packages and contain metadata, build instructions, and installation scripts. This snippet showcases the structure and common directives.

```rpm-spec
# # spec file for package minidlna # # Copyright (c) 2011, Sascha Peilicke <saschpe@gmx.de> # # All modifications and additions to the file contributed by third parties # remain the property of their copyright owners, unless otherwise agreed # upon. The license for this file, and modifications and additions to the # file, is the same license as for the pristine package itself (unless the # license for the pristine package is not an Open Source License, in which # case the license is the MIT License). An "Open Source License" is a # license that conforms to the Open Source Definition (Version 1.9) # published by the Open Source Initiative. Name: libupnp6 Version: 1.6.13 Release: 0 Summary: Portable Universal Plug and Play (UPnP) SDK Group: System/Libraries License: BSD-3-Clause Url: http://sourceforge.net/projects/pupnp/ Source0: http://downloads.sourceforge.net/pupnp/libupnp-%{version}.tar.bz2 BuildRoot: %{_tmppath}/%{name}-%{version}-build %description The portable Universal Plug and Play (UPnP) SDK provides support for building UPnP-compliant control points, devices, and bridges on several operating systems. %package -n libupnp-devel Summary: Portable Universal Plug and Play (UPnP) SDK Group: Development/Libraries/C and C++ Provides: pkgconfig(libupnp) Requires: %{name} = %{version} %description -n libupnp-devel The portable Universal Plug and Play (UPnP) SDK provides support for building UPnP-compliant control points, devices, and bridges on several operating systems. %prep %setup -n libupnp-%{version} %build %configure --disable-static make %{?_smp_mflags} %install %makeinstall find %{buildroot} -type f -name '\*.la' -exec rm -f {} \; %post -p /sbin/ldconfig %postun -p /sbin/ldconfig %files %defattr(-,root,root,-) %doc ChangeLog NEWS README TODO %{_libdir}/libixml.so.\* %{_libdir}/libthreadutil.so.\* %{_libdir}/libupnp.so.\* %files -n libupnp-devel %defattr(-,root,root,-) %{_libdir}/pkgconfig/libupnp.pc %{_libdir}/libixml.so %{_libdir}/libthreadutil.so %{_libdir}/libupnp.so %{_includedir}/upnp/ %changelog
```

--------------------------------

### Puppet Class for MySQL Backups

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/puppet/index.html

A Puppet class that installs and configures AutoMySQLBackup for periodic MySQL backups. It manages file creation, directory setup, and package installations. Dependencies include standard Puppet functions and potentially the RPMforge repository for multicore support.

```puppet
# == Class: automysqlbackup
#
# Puppet module to install AutoMySQLBackup for periodic MySQL backups.
#
# class {
#   'automysqlbackup':
#     backup_dir => '/mnt/backups',
#   }
#
class automysqlbackup (
  $bin_dir = $automysqlbackup::params::bin_dir,
  $etc_dir = $automysqlbackup::params::etc_dir,
  $backup_dir = $automysqlbackup::params::backup_dir,
  $install_multicore = undef,
  $config = {},
  $config_defaults = {},
) inherits automysqlbackup::params {

  # Ensure valid paths are assigned
  validate_absolute_path($bin_dir)
  validate_absolute_path($etc_dir)
  validate_absolute_path($backup_dir)

  # Create a subdirectory in /etc for config files
  file {
    $etc_dir:
      ensure => directory,
      owner  => 'root',
      group  => 'root',
      mode   => '0750',
  }

  # Create an example backup file, useful for reference
  file {
    "${etc_dir}/automysqlbackup.conf.example":
      ensure => file,
      owner  => 'root',
      group  => 'root',
      mode   => '0660',
      source => 'puppet:///modules/automysqlbackup/automysqlbackup.conf',
  }

  # Add files from the developer
  file {
    "${etc_dir}/AMB_README":
      ensure => file,
      source => 'puppet:///modules/automysqlbackup/AMB_README',
  }
  file {
    "${etc_dir}/AMB_LICENSE":
      ensure => file,
      source => 'puppet:///modules/automysqlbackup/AMB_LICENSE',
  }

  # Install the actual binary file
  file {
    "${bin_dir}/automysqlbackup":
      ensure => file,
      owner  => 'root',
      group  => 'root',
      mode   => '0755',
      source => 'puppet:///modules/automysqlbackup/automysqlbackup',
  }

  # Create the base backup directory
  file {
    $backup_dir:
      ensure => directory,
      owner  => 'root',
      group  => 'root',
      mode   => '0755',
  }

  # If you'd like to keep your config in hiera and pass it to this class
  if !empty($config) {
    create_resources('automysqlbackup::backup', $config, $config_defaults)
  }

  # If using RedHat family, must have the RPMforge repo's enabled
  if $install_multicore {
    package {
      ['pigz', 'pbzip2']:
        ensure => installed
    }
  }
}

```

--------------------------------

### Stylus Syntax Highlighting Example in CodeMirror

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/stylus/index.html

Demonstrates Stylus syntax highlighting within CodeMirror, showcasing variable declarations, nested rules, and mixins. This is a visual representation of how Stylus code would appear.

```stylus
/* Stylus mode */
#id, .class, article {
  font-family: Arial, sans-serif;
}

/* Variables */
font-size-base = 16px
line-height-base = 1.5
font-family-base = "Helvetica Neue", Helvetica, Arial, sans-serif
text-color = lighten(#000, 20%)

body {
  font: 400 font-size-base/line-height-base font-family-base;
  color: text-color;
}

/* Variables */
link-color = darken(#428bca, 6.5%)
link-hover-color = darken(link-color, 15%)
link-decoration = none
link-hover-decoration = false

/* Mixin */
tab-focus() {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

a {
  color: link-color;
  if link-decoration {
    text-decoration: link-decoration;
  }
  &:hover, &:focus {
    color: link-hover-color;
  }
  &:focus {
    tab-focus();
  }
}

a {
  color: #3782c4;
  text-decoration: none;
}

a:hover, a:focus {
  color: #2f6ea7;
}

a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
```

--------------------------------

### Smarty Mode Initialization (JavaScript)

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/smarty/index.html

Initializes a CodeMirror editor instance with the Smarty mode. This example shows basic setup for a textarea element.

```javascript
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  lineNumbers: true,
  mode: "smarty"
});
```

--------------------------------

### Include CodeMirror Scripts and Stylesheets

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/doc/manual.html

This snippet shows how to include the necessary CodeMirror core JavaScript file, its CSS stylesheet, and a language-specific mode script (JavaScript in this example). These are essential for initializing a CodeMirror editor.

```html
<script src="lib/codemirror.js"></script>
<link rel="stylesheet" href="lib/codemirror.css">
<script src="mode/javascript/javascript.js"></script>
```

--------------------------------

### Cypher Query Example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/cypher/index.html

An example of a Cypher query demonstrating pattern matching, filtering, and returning results. This syntax is highlighted by the CodeMirror Cypher mode.

```cypher
MATCH (joe { name: 'Joe' })-[:knows*2..2]-(friend_of_friend)
WHERE NOT (joe)-[:knows]-(friend_of_friend)
RETURN friend_of_friend.name, COUNT(*) ORDER BY COUNT(*) DESC , friend_of_friend.name
```

--------------------------------

### CodeMirror Key Map Configuration (Insert Spaces)

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/doc/manual.html

Example of configuring a key map in CodeMirror to insert spaces instead of a tab character. This demonstrates how to override default key behaviors using `extraKeys` option.

```javascript
editor.setOption("extraKeys", {
  Tab: function(cm) {
    var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
    cm.replaceSelection(spaces);
  }
});
```

--------------------------------

### xù MSC Language Syntax Example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/mscgen/index_xu.html

An example of the xù language syntax used for Message Sequence Charts (MSC), demonstrating keywords like alt, loop, and inline expressions.

```text/x-xu
msc { hscale="0.8", width="700"; a, b [label="change store"], c, d [label="necro queue"], e [label="natalis queue"], f; a =>> b [label="get change list()"]; a alt f [label="changes found"] { /* alt is a xu specific keyword*/ b >> a [label="list of changes"]; a =>> c [label="cull old stuff (list of changes)"]; b loop e [label="for each change"] { // loop is xu specific as well... /* * Here interesting stuff happens. * TBD */ c =>> b [label="get change()"]; b >> c [label="change"]; c alt e [label="change too old"] { c =>> d [label="queue(change)"]; --- [label="change newer than latest run"]; c =>> e [label="queue(change)"]; --- [label="all other cases"]; ||| [label="leave well alone"]; }; }; c >> a [label="done processing"]; /* shucks! nothing found ...*/ --- [label="nothing found"]; b >> a [label="nothing"]; a note a [label="silent exit"]; }; }
```

--------------------------------

### Vue.js Single-File Component Example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/vue/index.html

An example of a Vue.js single-file component demonstrating template, script (CoffeeScript), and style (Sass) sections. This showcases the structure that the Vue.js mode is designed to parse.

```html
<template> <div class="sass">Im am a {{mustache-like}} template</div> </template> <script lang="coffee"> module.exports = props: 
['one', 'two', 'three'] </script> <style lang="sass"> .sass font-size: 18px </style>
```

--------------------------------

### Turtle RDF Data Example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/turtle/index.html

An example of data formatted in the Turtle (Terse RDF Triple Language) syntax. This syntax is used for representing RDF graphs and is supported by the CodeMirror Turtle mode.

```turtle
@prefix foaf: <http://xmlns.com/foaf/0.1/> .
@prefix geo: <http://www.w3.org/2003/01/geo/wgs84_pos#> .
@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
<http://purl.org/net/bsletten> a foaf:Person;
  foaf:interest <http://www.w3.org/2000/01/sw/>;
  foaf:based_near [
    geo:lat "34.0736111" ;
    geo:lon "-118.3994444"
  ]
```

--------------------------------

### Tornado Template HTML Example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/tornado/index.html

An example of an HTML document structure utilizing Tornado template syntax, including variable interpolation and control flow blocks like 'for' loops.

```html
<!doctype html>
<html>
<head>
  <title>My Tornado web application</title>
</head>
<body>
  <h1> {{ title }} </h1>
  <ul class="my-list">
    {% for item in items %}
      <li>{% item.name %}</li>
    {% empty %}
      <li>You have no items in your list.</li>
    {% end %}
  </ul>
</body>
</html>
```

--------------------------------

### Gherkin Feature File Example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/gherkin/index.html

An example of a Gherkin feature file demonstrating its syntax. Gherkin is a business-readable, domain-specific language used for behavior-driven development (BDD). This syntax is recognized by the CodeMirror Gherkin mode.

```gherkin
Feature: Using Google
  Background: Something something Something else
  Scenario: Has a homepage
    When I navigate to the google home page
    Then the home page should contain the menu and the search form
  Scenario: Searching for a term
    When I navigate to the google home page
    When I search for Tofu
    Then the search results page is displayed
    Then the search results page contains 10 individual search results
    Then the search results contain a link to the wikipedia tofu page
```

--------------------------------

### Example CMake Configuration Script

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/cmake/index.html

A sample CMake script demonstrating common commands such as conditional logic, policy settings, and system architecture detection. This code serves as a test case for the CMake syntax highlighting mode.

```cmake
# vim: syntax=cmake
if(NOT CMAKE_BUILD_TYPE)
  # default to Release build for GCC builds
  set(CMAKE_BUILD_TYPE Release CACHE STRING "Choose the type of build, options are: None(CMAKE_CXX_FLAGS or CMAKE_C_FLAGS used) Debug Release RelWithDebInfo MinSizeRel." FORCE)
endif()

message(STATUS "cmake version ${CMAKE_VERSION}")

if(POLICY CMP0025)
  cmake_policy(SET CMP0025 OLD) # report Apple's Clang as just Clang
endif()

if(POLICY CMP0042)
  cmake_policy(SET CMP0042 NEW) # MACOSX_RPATH
endif()

project (x265)
cmake_minimum_required (VERSION 2.8.8)

include(CheckIncludeFiles)
include(CheckFunctionExists)
include(CheckSymbolExists)
include(CheckCXXCompilerFlag)

set(X265_BUILD 48)
configure_file("${PROJECT_SOURCE_DIR}/x265.def.in" "${PROJECT_BINARY_DIR}/x265.def")
configure_file("${PROJECT_SOURCE_DIR}/x265_config.h.in" "${PROJECT_BINARY_DIR}/x265_config.h")
SET(CMAKE_MODULE_PATH "${PROJECT_SOURCE_DIR}/cmake" "${CMAKE_MODULE_PATH}")
```

--------------------------------

### Initialize CodeMirror Editor Instance

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/doc/manual.html

Demonstrates how to instantiate a new CodeMirror editor by providing a target DOM element and an optional configuration object. The constructor appends the editor to the specified element and applies default settings if no options are provided.

```javascript
const myCodeMirror = CodeMirror(document.body, {
  value: "function myScript(){return 100;}",
  mode: "javascript"
});
```

--------------------------------

### CSS Syntax Highlighting Example

Source: https://github.com/aroberge/reeborg/blob/master/offline/codemirror-5.8.0/mode/css/index.html

This is an example of CSS code that would be highlighted by the CodeMirror CSS mode. It includes basic CSS rules, an import statement, and styling for various HTML elements. The mode supports standard CSS syntax.

```css
/* Some example CSS */ @import url("something.css"); body { margin: 0; padding: 3em 6em; font-family: tahoma, arial, sans-serif; color: #000; }
#navigation a { font-weight: bold; text-decoration: none !important; }
h1 { font-size: 2.5em; }
h2 { font-size: 1.7em; }
h1:before, h2:before { content: "::"; }
code { font-family: courier, monospace; font-size: 80%; color: #418A8A; }
```