flinker-markdown 1.1.0 → 1.1.2

package/README.md

@@ -1,21 +1,23 @@
 ## Intro
 __FlinkerMD__ (MD) is a TypeScript library for parsing markdown text into html.
 
-See demo:
-[](https://wiki.archlinux.org/title/Installation_guide)
 
 ## Install
 ```cli
 npm i flinker-markdown
 ```
 
-## Example
+## Example 1
 ```ts
+import { md, MDGrammar, MDParser } from "flinker-markdown"
+import { div, TextProps } from "flinker-dom"
+
 interface MarkdownProps extends TextProps {
   absolutePathPrefix?: string
   showRawText?: boolean
 }
 
+const grammar = new MDGrammar()
 const parser = new MDParser(grammar)
 export const Markdown = () => {
   return div<MarkdownProps>()
@@ -28,5 +30,29 @@ export const Markdown = () => {
 }
 ```
 
+## Example 2: Custom grammar rule
+Parsing Bash code:
+```ts
+const grammar = new MDGrammar()
+const bash = new MDLineGrammarRule()
+bash.matcher = [/^>>> /, '> '] // begin text with symbols >>> to tranform line to bash code
+bash.postProccessing = highlightBashCode // define highlight-func: (v: string) => string
+grammar.globalRule.childrenLineRules.splice(0, 0, bash)
+grammar.ol.childrenLineRules.splice(0, 0, bash) // allow lists to include bash code
+grammar.ul.childrenLineRules.splice(0, 0, bash)
+
+const parser = new MDParser(grammar)
+export const Markdown = () => {...}
+```
+
+highlightBashCode-func transforms text from e.g.:
+```html
+>>> npm run install
+```
+to the tokenized form: 
+```html
+<pre class="bashcode-dark"><code class="md-dark"><span class="op">&gt; </span><span class="bash-cmd">npm </span><span class="bash-param">run </span><span class="bash-param">install</span></code></pre>
+```
+
 ## License
 MIT

package/dist/esm/md.js

@@ -41,8 +41,14 @@ export class MDGrammar {
         // 
         // INLINE GRAMMAR RULES
         //
+        this.sup = new MDInlineGrammarRule();
+        this.sup.matcher = [/\^\{([^}]+)\}/g, '<sup>$1</sup>'];
+        this.sub = new MDInlineGrammarRule();
+        this.sub.matcher = [/_\{([^}]+)\}/g, '<sub>$1</sub>'];
         this.strong = new MDInlineGrammarRule();
-        this.strong.matcher = [/_{3,}([^_]+)_{3,}/g, '<strong>$1</strong>'];
+        this.strong.matcher = [/\*([^*]+)\*/g, '<strong>$1</strong>'];
+        this.boldItalic = new MDInlineGrammarRule();
+        this.boldItalic.matcher = [/_{3,}([^_]+)_{3,}/g, '<b><i>$1</i></b>'];
         this.bold = new MDInlineGrammarRule();
         this.bold.matcher = [/_{2,}([^_]+)_{2,}/g, '<b>$1</b>'];
         this.italic = new MDInlineGrammarRule();
@@ -55,12 +61,14 @@ export class MDGrammar {
         this.figure = new MDInlineGrammarRule();
         this.figure.matcher = [/!\[([^\]]+)\]\(([^)]+)\)\(([^)]+)\)/gm, '<figure><img alt="$1" src="$2"/><figcaption>$3</figcaption></figure>'];
         this.img = new MDInlineGrammarRule();
-        this.img.matcher = [/!\[([^\]]+)\]\(([^)]+)\)/gm, '<img alt="$1" src="$2"/>'];
+        this.img.matcher = [/\[img:([^ ]+) ?([^\]]*)\]/gm, '<img src="$1" alt="$2"/>'];
         this.link = new MDInlineGrammarRule();
-        this.link.matcher = [/\[([^\]]*)\]\(([^)]+)\)/, (line, descr, url) => {
+        this.link.matcher = [/\[link:([^ ]+) ?([^\]]*)\]/, (line, url, descr) => {
                 return '<a href="' + url + '">' + (descr || url) + '</a>';
             }];
-        this.globalRule.childrenInlineRules = [this.code, this.figure, this.img, this.link, this.strong, this.bold, this.em, this.italic];
+        this.audio = new MDInlineGrammarRule();
+        this.audio.matcher = [/\[audio:([^\]]+)\]/, '<audio controls src="$1"></audio>'];
+        this.globalRule.childrenInlineRules = [this.code, this.figure, this.img, this.link, this.audio, this.sub, this.sup, this.strong, this.boldItalic, this.bold, this.em, this.italic];
         // 
         // LINE GRAMMAR RULES
         //
@@ -69,7 +77,7 @@ export class MDGrammar {
                 const count = signs.length;
                 return '<h' + count + '>' + header + '</h' + count + '>';
             }];
-        this.header.childrenInlineRules = [this.strong, this.bold, this.italic];
+        this.header.childrenInlineRules = [this.strong, this.boldItalic, this.bold, this.italic];
         this.header.preProccessing = defLinePreproccessing;
         this.quote = new MDLineGrammarRule();
         this.quote.matcher = [/^> (.*)$/, '<blockquote><p>$1</p></blockquote>'];

package/dist/types/md.d.ts

@@ -24,14 +24,18 @@ export declare class MDMultilineGrammarRule {
 }
 export declare class MDGrammar {
     readonly globalRule: GlobalGrammarRule;
+    readonly sup: MDInlineGrammarRule;
+    readonly sub: MDInlineGrammarRule;
     readonly strong: MDInlineGrammarRule;
     readonly bold: MDInlineGrammarRule;
     readonly italic: MDInlineGrammarRule;
+    readonly boldItalic: MDInlineGrammarRule;
     readonly em: MDInlineGrammarRule;
     readonly code: MDInlineGrammarRule;
     readonly figure: MDInlineGrammarRule;
     readonly img: MDInlineGrammarRule;
     readonly link: MDInlineGrammarRule;
+    readonly audio: MDInlineGrammarRule;
     readonly header: MDLineGrammarRule;
     readonly quote: MDLineGrammarRule;
     readonly alignRight: MDLineGrammarRule;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "flinker-markdown",
   "description": "Free TypeScript library for parsing markdown text (customisable, not standardized).",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Dittner/FlinkerMD.git"