GithubHelp home page GithubHelp logo

foo123 / prism-grammar Goto Github PK

View Code? Open in Web Editor NEW
9.0 4.0 1.0 1.91 MB

Transform a JSON grammar into a syntax-highlighter for Prism

Home Page: https://foo123.github.io/examples/prism-grammar/

JavaScript 89.70% CSS 3.08% HTML 6.69% Batchfile 0.53%
grammar-parser syntax-highlighter

prism-grammar's Introduction

prism-grammar

Transform a JSON grammar into a syntax-highlighter for Prism

Prism Grammar

A simple and light-weight (~ 46kB minified, ~ 15kB zipped) Prism plugin

to generate prism-compatible syntax-highlighters from a grammar specification in JSON format.

see also:

  • Abacus advanced Combinatorics and Algebraic Number Theory Symbolic Computation library for JavaScript, Python
  • Plot.js simple and small library which can plot graphs of functions and various simple charts and can render to Canvas, SVG and plain HTML
  • HAAR.js image feature detection based on Haar Cascades in JavaScript (Viola-Jones-Lienhart et al Algorithm)
  • HAARPHP image feature detection based on Haar Cascades in PHP (Viola-Jones-Lienhart et al Algorithm)
  • FILTER.js video and image processing and computer vision Library in pure JavaScript (browser and node)
  • Xpresion a simple and flexible eXpression parser engine (with custom functions and variables support), based on GrammarTemplate, for PHP, JavaScript, Python
  • Regex Analyzer/Composer Regular Expression Analyzer and Composer for PHP, JavaScript, Python
  • GrammarTemplate grammar-based templating for PHP, JavaScript, Python
  • codemirror-grammar transform a formal grammar in JSON format into a syntax-highlight parser for CodeMirror editor
  • ace-grammar transform a formal grammar in JSON format into a syntax-highlight parser for ACE editor
  • prism-grammar transform a formal grammar in JSON format into a syntax-highlighter for Prism code highlighter
  • highlightjs-grammar transform a formal grammar in JSON format into a syntax-highlight mode for Highlight.js code highlighter
  • syntaxhighlighter-grammar transform a formal grammar in JSON format to a highlight brush for SyntaxHighlighter code highlighter
  • SortingAlgorithms implementations of Sorting Algorithms in JavaScript
  • PatternMatchingAlgorithms implementations of Pattern Matching Algorithms in JavaScript

Note: The invariant codebase for all the *-grammar add-ons resides at editor-grammar repository (used as a git submodule)

Contents

Build your own syntax-highlight mode on the fly

Todo

see Modularity and Future Directions

  • add some options to customize highlighting (e.g whether to treat errors differently than non-styled)
  • enable grammar add-on to pre-compile a grammar specification directly into mode source code, so it can be used without the add-on as standalone mode [TODO, maybe]

Features

  • A Grammar can extend other Grammars (so arbitrary variations and dialects can be handled more easily)
  • Grammar includes: Style Model , Lex Model and Syntax Model (optional), plus a couple of settings (see examples)
  • Grammar specification can be minimal, defaults will be used (see example grammars)
  • Grammar.Syntax Model can enable highlight in a more context-specific way, plus detect possible syntax errors
  • Grammar.Syntax Model can contain recursive references
  • Grammar.Syntax Model can be (fully) specificed using PEG-like notation or BNF-like notation (NEW feature)
  • Grammar.Syntax Model implements positive / negative lookahead tokens (analogous to PEG and-/not- predicates) (NEW feature)
  • Grammar.Syntax Model can include external (sub-)grammars so that new multiplexed / mixed grammars are created easily and intuitively (see test examples) (NEW feature)
  • Grammar can define action tokens to perform complex context-specific parsing functionality, including associated tag matching and duplicate identifiers (see for example xml.grammar example) (NEW feature)
  • Generated highlighters are optimized for speed and size
  • Can generate a syntax-highlighter from a grammar interactively and on-the-fly ( see example, http://foo123.github.io/examples/prism-grammar )
  • see also Modularity and Future Directions

How to use:

An example for XML:

// 1. a partial xml grammar in simple JSON format
var xml_grammar = {
    
// prefix ID for regular expressions, represented as strings, used in the grammar
"RegExpID"                          : "RE::",

// Style model
"Style"                             : {
    
     "declaration"                  : "tag"
    ,"doctype"                      : "entity"
    ,"meta"                         : "entity"
    ,"comment"                      : "comment"
    ,"cdata"                        : "comment"
    ,"atom"                         : "string"
    ,"tag"                          : "tag"
    ,"attribute"                    : "attr-name"
    ,"number"                       : "number"
    // "" represents default style or unstyled
    ,"string"                       : ""
    // allow block delims / interior to have different styles
    ,"string.inside"                : "attr-value"

},

// Lexical model
"Lex"                               : {
     
     "comment:comment"              : ["<!--", "-->"]
    ,"declaration:block"            : ["<?xml", "?>"]
    ,"doctype:block"                : ["RE::/<!doctype\\b/i", ">"]
    ,"meta:block"                   : ["RE::/<\\?[_a-zA-Z][\\w\\._\\-]*/", "?>"]
    ,"cdata:block"                  : ["<![CDATA[", "]]>"]
    ,"open_tag"                     : "RE::/<([_a-zA-Z][_a-zA-Z0-9\\-]*)/"
    ,"close_tag"                    : "RE::/<\\/([_a-zA-Z][_a-zA-Z0-9\\-]*)>/"
    ,"attribute"                    : "RE::/[_a-zA-Z][_a-zA-Z0-9\\-]*/"
    ,"string:line-block"            : [["\""], ["'"]]
    ,"number"                       : ["RE::/[0-9]\\d*/", "RE::/#[0-9a-fA-F]+/"]
    ,"atom"                         : ["RE::/&#x[a-fA-F\\d]+;/", "RE::/&#[\\d]+;/", "RE::/&[a-zA-Z][a-zA-Z0-9]*;/"]
    ,"text"                         : "RE::/[^<&]+/"
    
    // actions
    ,"tag_ctx:action"               : {"context":true}
    ,"\\tag_ctx:action"             : {"context":false}
    ,"unique_id:action"             : {"unique":["xml", "$1"],"msg":"Duplicate id value \"$0\""}
    ,"unique_att:action"            : {"unique":["tag", "$0"],"msg":"Duplicate attribute \"$0\"","in-context":true}
    ,"tag_opened:action"            : {"push":"<$1>","ci":true}
    ,"tag_closed:action"            : {"pop":"<$1>","ci":true,"msg":"Tags \"$0\" and \"$1\" do not match"}
    ,"tag_autoclosed:action"        : {"pop":null}
    ,"out_of_place:error"           : "\"$2$3\" can only be at the beginning of XML document"
    
},
    
// Syntax model (optional)
"Syntax"                            : {
     
     "tag_att"                      : "'id'.attribute unique_att '=' string unique_id | attribute unique_att '=' (string | number)"
    ,"start_tag"                    : "open_tag.tag tag_ctx tag_opened tag_att* ('>'.tag | '/>'.tag tag_autoclosed) \\tag_ctx"
    ,"end_tag"                      : "close_tag.tag tag_closed"
    ,"xml"                          : "(^^1 declaration? doctype?) (declaration.error out_of_place | doctype.error out_of_place | comment | meta | cdata | start_tag | end_tag | atom | text)*"
    
},
    
// what to parse and in what order
"Parser"                            : [ ["xml"] ]

};

// 2. parse the grammar into a Prism-compatible syntax-highlighter
var xml_mode = PrismGrammar.getMode( xml_grammar );

// output escaped html code, to work properly (Prism.version 1.2.0+)
xml_mode.escapeHtml = true;

// 3. use it with Prism
xml_mode.hook( "xml", Prism );

// mode can be unhooked also
// xml_mode.unhook();

Result:

xml-grammar

Other Examples:

htmlmixed-grammar

js-grammar

css-grammar

prism-grammar's People

Contributors

foo123 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

Forkers

mcanthony

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.