Markup language customization

kotoba.js has highly customizable markup language.

All markup settings are stored in single JSON configuration file located at /app/src/json/parser.json.

Configuration

This JSON file contains an array of objects (directives), each representing one markdown tag. Here is an object that tells to convert text surrounded by double asterisks into bold text:

{
  "initiator": "**",
  "terminator": "**",
  "multiline": false,
  "newline": false,
  "nesting": true,
  "preserveInitiator": false,
  "preserveTerminator": false,
  "openTag": "<strong>",
  "closeTag": "</strong>"
}

initiator and terminator are open and close tags in user input that will be replaced by openTag and closeTag HTML accordingly in resulting post. You can add any classes and attributes to openTag, but remember to escape quotation marks:

...
"openTag": "<code class=\"code code-multiline\">",
...

Both initiator and terminator are required, if directive has no terminator, like > greentext quotes, then terminator should be a newline character ("\n"):

...
"initiator": ">",
"terminator": "\n",
...

All other options are boolean:

• multiline: if false, both initiator and terminator must be on same line. Most inline tags break on newline.
• newline: if true, initiator must start on new line and there must be no text before it. Used for > greentext and alike.
• nesting: if true, allow other tags to be nested inside, for example bold text in spoilers, quotes, etc. If false, content between initiator and terminator will not be parsed. Used for code.
• preserveInitiator and preserveTerminator: whether or not strip initiator or terminator from resulting text. For example, **bold text** becomes bold text if preserveInitiator and preserveTerminator is false and **bold text** if true. Used for > greentext and alike.

Each line of text, including last one, ends with newline character ("\n"), not "\r\n" or anything else.

Parsing

Algorithm of parser roughly looks like this:

1. convert line endings
2. search for first initiator of any directive
3. when initiator is found, find terminator
4. if no terminator found, or newline encountered and multiline is false, goto 2.
5. if nesting is true, parse content between terminator and initiator recursively.
6. replace terminator and initiator with openTag and closeTag accordingly. If preserveInitiator/preserveTerminator is true, terminator/initiator not replaced, but surrounded bu openTag/closeTag.

The reflinks (>>123) and http:// links are also parsed in process, but they are not configurable.

The order in which directives are in array is important, the priority is from top to bottom, for example double asterisks ** bold text directive goes before single asterisks * italic text directive because ** would also be treated as initiator and terminator of italic text directive and not initiator of bold text directive otherwise.

BBCode

It's quite easy to convert wakabamark to BBcode:

[
  {
    "initiator": "[b]",
    "terminator": "[/b]",
    "multiline": true,
    "newline": false,
    "nesting": true,
    "preserveInitiator": false,
    "preserveTerminator": false,
    "openTag": "<strong>",
    "closeTag": "</strong>"
  },
  {
    "initiator": "[i]",
    "terminator": "[/i]",
    "multiline": true,
    "newline": false,
    "nesting": true,
    "preserveInitiator": false,
    "preserveTerminator": false,
    "openTag": "<em>",
    "closeTag": "</em>"
  },
  {
    "initiator": "[s]",
    "terminator": "[/s]",
    "multiline": true,
    "newline": false,
    "nesting": true,
    "preserveInitiator": false,
    "preserveTerminator": false,
    "openTag": "<del>",
    "closeTag": "</del>"
  },
  {
    "initiator": "[spoiler]",
    "terminator": "[/spoiler]",
    "multiline": true,
    "newline": false,
    "nesting": true,
    "preserveInitiator": false,
    "preserveTerminator": false,
    "openTag": "<span class=\"spoiler\">",
    "closeTag": "</span>"
  },
  {
    "initiator": "[aa]",
    "terminator": "[/aa]",
    "multiline": true,
    "newline": true,
    "nesting": false,
    "preserveInitiator": false,
    "preserveTerminator": false,
    "openTag": "<code class=\"code code-aa\">",
    "closeTag": "</code>"
  },
  {
    "initiator": "[code]",
    "terminator": "[/code]",
    "multiline": true,
    "newline": true,
    "nesting": false,
    "preserveInitiator": false,
    "preserveTerminator": false,
    "openTag": "<code class=\"code code-multiline\">",
    "closeTag": "</code>"
  },
  {
    "initiator": "[code]",
    "terminator": "[/code]",
    "multiline": false,
    "newline": false,
    "nesting": false,
    "preserveInitiator": false,
    "preserveTerminator": false,
    "openTag": "<code>",
    "closeTag": "</code>"
  }
]

Here multiline is set to true in most cases as with BBCode possibility of false-positive matches is almost non-existent and it's much more time consuming to write long tags on each line.

You can add BBCode to already existing directives, so users can use both markup styles, or replace it.

Note that you edit this on your own risk, not knowing what you are doing can result in crash of engine or in broken layout. Always check changes on localhost before deploying to production.