Rulers: Methods

Methods determine how a tag get processed into HTML. Only certain methods works with other, and some with the proper ruler type. In general, method returns either a string of a HTML element (done in CSS naming scheme; see wrap) or is a function that returns a token. Here is a list of the ones we're aware of:

• wrap
• replace
• before & after

Here we're only discussing the different method types. For actual code on how to process a tag and generate HTML, see Tokens and Processing

See Structure of a Ruler for how to make a Ruler

Wrap

wrap is the simplest method. Here is an example:

  md.inline.bbcode.ruler.push("highlight", {
    tag: "highlight",
    wrap: "span.bbcodeHighlight"
  });

Here [highlight]text[/highlight] becomes <span class="bbcodeHighlight">text</span>.

wrap in this use case is extremely simple, but not very useful. Instead, we can give it a function similar to every other method.

  md.block.bbcode.ruler.push("scroll", {
    tag: "scroll",
    wrap: function (token, tagInfo) {
      let heightOption = tagInfo.attrs['_default'];
      token.attrs = [["style", "max-width: 100%; padding: 5px; overflow:auto; border: 1px solid; height:" + heightOption + ";"]];
      return true;
    }
  });

wrap works with both inline and block level rulers. That being said, in our plugin, we have another function called wrap(), which only works with inline. See ____ for more info

Replace

replace simply replaces the entire BBCode with whatever HTML is generated. Here is an example:

  md.inline.bbcode.ruler.push("ooc", {
    tag: "ooc",
    replace: function (state, tagInfo, content) {

      let token = state.push("div_open", "div", 1);
      token.attrs = [["class", "bbcode-ooc"]];

      state.push("div_open", "div", 1);

      token = state.push("text", "", 0);
      token.content = "OOC";

      state.push("div_close", "div", -1);

      token = state.push("text", "", 0);
      token.content = content;

      state.push("div_close", "div", -1);

      return true;
    }
  });

Before & After

before and after give the greatest amount of control, as it determines what goes before and after a tag without affecting the content inside it. It hasn't been tested if they can operate independently of each other yet, as we have yet to find such a use case. In any case, while content can be passed into them, they're best used when the intention is to not affect the content

  md.block.bbcode.ruler.push("border", {
    tag: "border",
    before: function (state, tagInfo) {
      let styleOption = tagInfo.attrs['_default'];
      let token = state.push('div_open', 'div', 1);
      token.attrs = [["class", "bbcode-border"], ["style", "border: " + styleOption]];
    },
    after: function (state) {
      state.push('div_close', 'div', -1);
    }
  });

Unfortunately, this only works with block level rulers. However, it means that it allows blocks to be nested inside each other.