Inline PUML

docs/userGuide/puml.md

@@ -34,12 +34,15 @@ Name | Type | Default | Description
 --- | --- | --- | ---
 alt | `string` | | **This must be specified.**<br>The alternative text of the diagram.
 height | `string` | | The height of the diagram in pixels.
-src | `string` | | **This must be specified.**<br>The URL of the diagram.<br>The URL can be specified as absolute or relative references. More info in: _[Intra-Site Links]({{baseUrl}}/userGuide/formattingContents.html#intraSiteLinks)_
+src | `string` | | <br>The URL of the diagram if your PUML input is in another file.<br>The URL can be specified as absolute or relative references. More info in: _[Intra-Site Links]({{baseUrl}}/userGuide/formattingContents.html#intraSiteLinks)_
+name | `string` | | The name of the output file.
 width | `string` | | The width of the diagram in pixels.<br>If both width and height are specified, width takes priority over height. It is to maintain the diagram's aspect ratio.
 
 
 ### Example
 
+You could have your PUML be written in a separate file or inline.
+
 <include src="outputBox.md" boilerplate>
 <span id="code">
 
@@ -57,17 +60,33 @@ return success
 @enduml
 ```
 
-_Markbind page_:
+_Markbind page separate file_:
 ```
 <puml src="diagrams/sequence.puml" width=300/>
 ```
 
+_Markbind page inline_:
+`````
+<puml width=300/>
+
+```puml
+@startuml
+alice -> bob ++ : hello
+bob -> bob ++ : self call
+bob -> bib ++ #005500 : hello
+bob -> george ** : create
+return done
+return rc
+bob -> george !! : delete
+return success
+@enduml
+```
+`````
 </span>
 
 <span id="output">
 <pic src="diagrams/sequence.png" width="300" />
 </span>
-
 </include>
 
 <box type="info">

package.json

@@ -26,6 +26,7 @@
  "cheerio": "^0.22.0",
  "chokidar": "^3.3.0",
  "commander": "^3.0.2",
+ "crypto-js": "^3.1.0",
  "fastmatter": "^2.1.1",
  "figlet": "^1.2.4",
  "find-up": "^4.1.0",

src/Page.js

@@ -761,6 +761,7 @@ class Page {
  rootPath: this.rootPath,
  userDefinedVariablesMap: this.userDefinedVariablesMap,
  headerIdMap: this.headerIdMap,
+ resultPath: this.resultPath,
  };
  return new Promise((resolve, reject) => {
  markbinder.includeFile(this.sourcePath, fileConfig)

src/lib/markbind/src/constants.js

@@ -2,6 +2,7 @@ module.exports = {
  // src/lib/markbind/src/parser.js
  ATTRIB_INCLUDE_PATH: 'include-path',
  ATTRIB_CWF: 'cwf',
+ ATTRIB_RESULT_PATH: 'resultPath',
 
  BOILERPLATE_FOLDER_NAME: '_markbind/boilerplates',
 

src/lib/markbind/src/lib/markdown-it/index.js

@@ -42,6 +42,31 @@ markdownIt.renderer.rules.table_close = (tokens, idx) => {
  return '</table></div>';
 };
 
+// rewritten markdown-it renderer.js rule to add a div containing the language of the code block 
+markdownIt.renderer.rules.fence = (tokens, idx, options, env, slf) => {
+ var token = tokens[idx],
+ info = token.info ? markdownIt.utils.unescapeAll(token.info).trim() : '',
+ langName = '',
+ highlighted;
+
+ if (info) {
+ langName = info.split(/\s+/g)[0];
+ }
+
+ const widgetHandler = env[langName];
+ if (widgetHandler !== undefined) {
+ return widgetHandler(token.content);
+ }
+
+ if (options.highlight) {
+ highlighted = options.highlight(token.content, langName) || escapeHtml(token.content);
+ } else {
+ highlighted = escapeHtml(token.content);
+ }
+
+ return highlighted + '\n';
+}
+
 // highlight inline code
 markdownIt.renderer.rules.code_inline = (tokens, idx, options, env, slf) => {
  const token = tokens[idx];

src/lib/markbind/src/parser.js

@@ -8,6 +8,7 @@ const url = require('url');
 const pathIsInside = require('path-is-inside');
 const slugify = require('@sindresorhus/slugify');
 const componentParser = require('./parsers/componentParser');
+const widget = require('../../../widgets/widgets');
 
 const _ = {};
 _.clone = require('lodash/clone');
@@ -383,6 +384,10 @@ class Parser {
  element.children = element.children.map(e => self._preprocess(e, context, config));
  }
  }
+
+
+ widget.preprocessWidget(config, context, element);
+
  return element;
  }
 
@@ -512,6 +517,8 @@ class Parser {
  break;
  }
 
+ widget.parseWidget(config, context, element);
+
  componentParser.parseComponents(element, this._onError);
 
  if (element.children) {
@@ -568,6 +575,7 @@ class Parser {
  }
  return processed;
  });
+
  resolve(cheerio.html(nodes));
  });
 

src/lib/markbind/src/utils.js

@@ -1,5 +1,6 @@
 const fs = require('fs');
 const path = require('path');
+const cheerio = require('cheerio');
 
 const { markdownFileExts } = require('./constants');
 
@@ -100,4 +101,21 @@ module.exports = {
 
  return text.join('').trim();
  },
+
+ extractCodeElement(element, codeLanguage = '') {
+ let codeBlockElement = cheerio.parseHTML('<div></div>', true)[0];
+
+ element.children.forEach((child) => {
+ if (child.name === 'pre' && child.children.length >= 1) {
+ const [nestedChild] = child.children;
+ if (nestedChild.name !== 'code') {
+ return;
+ }
+ [codeBlockElement] = nestedChild.children;
+ codeBlockElement.data = `\`\`\`${codeLanguage}\n${codeBlockElement.data}\n\`\`\``;
+ }
+ });
+
+ return codeBlockElement;
+ },
 };

docs/userGuide/puml.md

@@ -34,12 +34,15 @@ Name | Type | Default | Description
 --- | --- | --- | ---
 alt | `string` | | **This must be specified.**<br>The alternative text of the diagram.
 height | `string` | | The height of the diagram in pixels.
-src | `string` | | **This must be specified.**<br>The URL of the diagram.<br>The URL can be specified as absolute or relative references. More info in: _[Intra-Site Links]({{baseUrl}}/userGuide/formattingContents.html#intraSiteLinks)_
+src | `string` | | <br>The URL of the diagram if your PUML input is in another file.<br>The URL can be specified as absolute or relative references. More info in: _[Intra-Site Links]({{baseUrl}}/userGuide/formattingContents.html#intraSiteLinks)_
+name | `string` | | The name of the output file.
 width | `string` | | The width of the diagram in pixels.<br>If both width and height are specified, width takes priority over height. It is to maintain the diagram's aspect ratio.
 
 
 ### Example
 
+You could have your PUML be written in a separate file or inline.
+
 <include src="outputBox.md" boilerplate>
 <span id="code">
 
@@ -57,17 +60,33 @@ return success
 @enduml
 ```
 
-_Markbind page_:
+_Markbind page separate file_:
 ```
 <puml src="diagrams/sequence.puml" width=300/>
 ```
 
+_Markbind page inline_:
+`````
+<puml width=300/>
+
+```puml
+@startuml
+alice -> bob ++ : hello
+bob -> bob ++ : self call
+bob -> bib ++ #005500 : hello
+bob -> george ** : create
+return done
+return rc
+bob -> george !! : delete
+return success
+@enduml
+```
+`````
 </span>
 
 <span id="output">
 <pic src="diagrams/sequence.png" width="300" />
 </span>
-
 </include>
 
 <box type="info">

package.json

@@ -26,6 +26,7 @@
  "cheerio": "^0.22.0",
  "chokidar": "^3.3.0",
  "commander": "^3.0.2",
+ "crypto-js": "^3.1.0",
  "fastmatter": "^2.1.1",
  "figlet": "^1.2.4",
  "find-up": "^4.1.0",

src/Page.js

@@ -761,6 +761,7 @@ class Page {
  rootPath: this.rootPath,
  userDefinedVariablesMap: this.userDefinedVariablesMap,
  headerIdMap: this.headerIdMap,
+ resultPath: this.resultPath,
  };
  return new Promise((resolve, reject) => {
  markbinder.includeFile(this.sourcePath, fileConfig)

src/lib/markbind/src/constants.js

@@ -2,6 +2,7 @@ module.exports = {
  // src/lib/markbind/src/parser.js
  ATTRIB_INCLUDE_PATH: 'include-path',
  ATTRIB_CWF: 'cwf',
+ ATTRIB_RESULT_PATH: 'resultPath',
 
  BOILERPLATE_FOLDER_NAME: '_markbind/boilerplates',
 

src/lib/markbind/src/lib/markdown-it/index.js

@@ -42,6 +42,31 @@ markdownIt.renderer.rules.table_close = (tokens, idx) => {
  return '</table></div>';
 };
 
+// rewritten markdown-it renderer.js rule to add a div containing the language of the code block 
+markdownIt.renderer.rules.fence = (tokens, idx, options, env, slf) => {
+ var token = tokens[idx],
+ info = token.info ? markdownIt.utils.unescapeAll(token.info).trim() : '',
+ langName = '',
+ highlighted;
+
+ if (info) {
+ langName = info.split(/\s+/g)[0];
+ }
+
+ const widgetHandler = env[langName];
+ if (widgetHandler !== undefined) {
+ return widgetHandler(token.content);
+ }
+
+ if (options.highlight) {
+ highlighted = options.highlight(token.content, langName) || escapeHtml(token.content);
+ } else {
+ highlighted = escapeHtml(token.content);
+ }
+
+ return highlighted + '\n';
+}
+
 // highlight inline code
 markdownIt.renderer.rules.code_inline = (tokens, idx, options, env, slf) => {
  const token = tokens[idx];

src/lib/markbind/src/parser.js

@@ -8,6 +8,7 @@ const url = require('url');
 const pathIsInside = require('path-is-inside');
 const slugify = require('@sindresorhus/slugify');
 const componentParser = require('./parsers/componentParser');
+const widget = require('../../../widgets/widgets');
 
 const _ = {};
 _.clone = require('lodash/clone');
@@ -383,6 +384,10 @@ class Parser {
  element.children = element.children.map(e => self._preprocess(e, context, config));
  }
  }
+
+
+ widget.preprocessWidget(config, context, element);
+
  return element;
  }
 
@@ -512,6 +517,8 @@ class Parser {
  break;
  }
 
+ widget.parseWidget(config, context, element);
+
  componentParser.parseComponents(element, this._onError);
 
  if (element.children) {
@@ -568,6 +575,7 @@ class Parser {
  }
  return processed;
  });
+
  resolve(cheerio.html(nodes));
  });
 

src/lib/markbind/src/utils.js

@@ -1,5 +1,6 @@
 const fs = require('fs');
 const path = require('path');
+const cheerio = require('cheerio');
 
 const { markdownFileExts } = require('./constants');
 
@@ -100,4 +101,21 @@ module.exports = {
 
  return text.join('').trim();
  },
+
+ extractCodeElement(element, codeLanguage = '') {
+ let codeBlockElement = cheerio.parseHTML('<div></div>', true)[0];
+
+ element.children.forEach((child) => {
+ if (child.name === 'pre' && child.children.length >= 1) {
+ const [nestedChild] = child.children;
+ if (nestedChild.name !== 'code') {
+ return;
+ }
+ [codeBlockElement] = nestedChild.children;
+ codeBlockElement.data = `\`\`\`${codeLanguage}\n${codeBlockElement.data}\n\`\`\``;
+ }
+ });
+
+ return codeBlockElement;
+ },
 };

docs/userGuide/puml.md

@@ -34,12 +34,15 @@ Name | Type | Default | Description
 --- | --- | --- | ---
 alt | `string` | | **This must be specified.**<br>The alternative text of the diagram.
 height | `string` | | The height of the diagram in pixels.
-src | `string` | | **This must be specified.**<br>The URL of the diagram.<br>The URL can be specified as absolute or relative references. More info in: _[Intra-Site Links]({{baseUrl}}/userGuide/formattingContents.html#intraSiteLinks)_
+src | `string` | | <br>The URL of the diagram if your PUML input is in another file.<br>The URL can be specified as absolute or relative references. More info in: _[Intra-Site Links]({{baseUrl}}/userGuide/formattingContents.html#intraSiteLinks)_
+name | `string` | | The name of the output file.
 width | `string` | | The width of the diagram in pixels.<br>If both width and height are specified, width takes priority over height. It is to maintain the diagram's aspect ratio.
 
 
 ### Example
 
+You could have your PUML be written in a separate file or inline.
+
 <include src="outputBox.md" boilerplate>
 <span id="code">
 
@@ -57,17 +60,33 @@ return success
 @enduml
 ```
 
-_Markbind page_:
+_Markbind page separate file_:
 ```
 <puml src="diagrams/sequence.puml" width=300/>
 ```
 
+_Markbind page inline_:
+`````
+<puml width=300/>
+
+```puml
+@startuml
+alice -> bob ++ : hello
+bob -> bob ++ : self call
+bob -> bib ++ #005500 : hello
+bob -> george ** : create
+return done
+return rc
+bob -> george !! : delete
+return success
+@enduml
+```
+`````
 </span>
 
 <span id="output">
 <pic src="diagrams/sequence.png" width="300" />
 </span>
-
 </include>
 
 <box type="info">

package.json

@@ -26,6 +26,7 @@
  "cheerio": "^0.22.0",
  "chokidar": "^3.3.0",
  "commander": "^3.0.2",
+ "crypto-js": "^3.1.0",
  "fastmatter": "^2.1.1",
  "figlet": "^1.2.4",
  "find-up": "^4.1.0",

src/Page.js

@@ -761,6 +761,7 @@ class Page {
  rootPath: this.rootPath,
  userDefinedVariablesMap: this.userDefinedVariablesMap,
  headerIdMap: this.headerIdMap,
+ resultPath: this.resultPath,
  };
  return new Promise((resolve, reject) => {
  markbinder.includeFile(this.sourcePath, fileConfig)

src/lib/markbind/src/constants.js

@@ -2,6 +2,7 @@ module.exports = {
  // src/lib/markbind/src/parser.js
  ATTRIB_INCLUDE_PATH: 'include-path',
  ATTRIB_CWF: 'cwf',
+ ATTRIB_RESULT_PATH: 'resultPath',
 
  BOILERPLATE_FOLDER_NAME: '_markbind/boilerplates',
 

src/lib/markbind/src/lib/markdown-it/index.js

@@ -42,6 +42,31 @@ markdownIt.renderer.rules.table_close = (tokens, idx) => {
  return '</table></div>';
 };
 
+// rewritten markdown-it renderer.js rule to add a div containing the language of the code block 
+markdownIt.renderer.rules.fence = (tokens, idx, options, env, slf) => {
+ var token = tokens[idx],
+ info = token.info ? markdownIt.utils.unescapeAll(token.info).trim() : '',
+ langName = '',
+ highlighted;
+
+ if (info) {
+ langName = info.split(/\s+/g)[0];
+ }
+
+ const widgetHandler = env[langName];
+ if (widgetHandler !== undefined) {
+ return widgetHandler(token.content);
+ }
+
+ if (options.highlight) {
+ highlighted = options.highlight(token.content, langName) || escapeHtml(token.content);
+ } else {
+ highlighted = escapeHtml(token.content);
+ }
+
+ return highlighted + '\n';
+}
+
 // highlight inline code
 markdownIt.renderer.rules.code_inline = (tokens, idx, options, env, slf) => {
  const token = tokens[idx];

src/lib/markbind/src/parser.js

@@ -8,6 +8,7 @@ const url = require('url');
 const pathIsInside = require('path-is-inside');
 const slugify = require('@sindresorhus/slugify');
 const componentParser = require('./parsers/componentParser');
+const widget = require('../../../widgets/widgets');
 
 const _ = {};
 _.clone = require('lodash/clone');
@@ -383,6 +384,10 @@ class Parser {
  element.children = element.children.map(e => self._preprocess(e, context, config));
  }
  }
+
+
+ widget.preprocessWidget(config, context, element);
+
  return element;
  }
 
@@ -512,6 +517,8 @@ class Parser {
  break;
  }
 
+ widget.parseWidget(config, context, element);
+
  componentParser.parseComponents(element, this._onError);
 
  if (element.children) {
@@ -568,6 +575,7 @@ class Parser {
  }
  return processed;
  });
+
  resolve(cheerio.html(nodes));
  });
 

src/lib/markbind/src/utils.js

@@ -1,5 +1,6 @@
 const fs = require('fs');
 const path = require('path');
+const cheerio = require('cheerio');
 
 const { markdownFileExts } = require('./constants');
 
@@ -100,4 +101,21 @@ module.exports = {
 
  return text.join('').trim();
  },
+
+ extractCodeElement(element, codeLanguage = '') {
+ let codeBlockElement = cheerio.parseHTML('<div></div>', true)[0];
+
+ element.children.forEach((child) => {
+ if (child.name === 'pre' && child.children.length >= 1) {
+ const [nestedChild] = child.children;
+ if (nestedChild.name !== 'code') {
+ return;
+ }
+ [codeBlockElement] = nestedChild.children;
+ codeBlockElement.data = `\`\`\`${codeLanguage}\n${codeBlockElement.data}\n\`\`\``;
+ }
+ });
+
+ return codeBlockElement;
+ },
 };

docs/userGuide/puml.md

@@ -34,12 +34,15 @@ Name | Type | Default | Description
 --- | --- | --- | ---
 alt | `string` | | **This must be specified.**<br>The alternative text of the diagram.
 height | `string` | | The height of the diagram in pixels.
-src | `string` | | **This must be specified.**<br>The URL of the diagram.<br>The URL can be specified as absolute or relative references. More info in: _[Intra-Site Links]({{baseUrl}}/userGuide/formattingContents.html#intraSiteLinks)_
+src | `string` | | <br>The URL of the diagram if your PUML input is in another file.<br>The URL can be specified as absolute or relative references. More info in: _[Intra-Site Links]({{baseUrl}}/userGuide/formattingContents.html#intraSiteLinks)_
+name | `string` | | The name of the output file.
 width | `string` | | The width of the diagram in pixels.<br>If both width and height are specified, width takes priority over height. It is to maintain the diagram's aspect ratio.
 
 
 ### Example
 
+You could have your PUML be written in a separate file or inline.
+
 <include src="outputBox.md" boilerplate>
 <span id="code">
 
@@ -57,17 +60,33 @@ return success
 @enduml
 ```
 
-_Markbind page_:
+_Markbind page separate file_:
 ```
 <puml src="diagrams/sequence.puml" width=300/>
 ```
 
+_Markbind page inline_:
+`````
+<puml width=300/>
+
+```puml
+@startuml
+alice -> bob ++ : hello
+bob -> bob ++ : self call
+bob -> bib ++ #005500 : hello
+bob -> george ** : create
+return done
+return rc
+bob -> george !! : delete
+return success
+@enduml
+```
+`````
 </span>
 
 <span id="output">
 <pic src="diagrams/sequence.png" width="300" />
 </span>
-
 </include>
 
 <box type="info">

package.json

@@ -26,6 +26,7 @@
  "cheerio": "^0.22.0",
  "chokidar": "^3.3.0",
  "commander": "^3.0.2",
+ "crypto-js": "^3.1.0",
  "fastmatter": "^2.1.1",
  "figlet": "^1.2.4",
  "find-up": "^4.1.0",

src/Page.js

@@ -761,6 +761,7 @@ class Page {
  rootPath: this.rootPath,
  userDefinedVariablesMap: this.userDefinedVariablesMap,
  headerIdMap: this.headerIdMap,
+ resultPath: this.resultPath,
  };
  return new Promise((resolve, reject) => {
  markbinder.includeFile(this.sourcePath, fileConfig)

src/lib/markbind/src/constants.js

@@ -2,6 +2,7 @@ module.exports = {
  // src/lib/markbind/src/parser.js
  ATTRIB_INCLUDE_PATH: 'include-path',
  ATTRIB_CWF: 'cwf',
+ ATTRIB_RESULT_PATH: 'resultPath',
 
  BOILERPLATE_FOLDER_NAME: '_markbind/boilerplates',
 

src/lib/markbind/src/lib/markdown-it/index.js

@@ -42,6 +42,31 @@ markdownIt.renderer.rules.table_close = (tokens, idx) => {
  return '</table></div>';
 };
 
+// rewritten markdown-it renderer.js rule to add a div containing the language of the code block 
+markdownIt.renderer.rules.fence = (tokens, idx, options, env, slf) => {
+ var token = tokens[idx],
+ info = token.info ? markdownIt.utils.unescapeAll(token.info).trim() : '',
+ langName = '',
+ highlighted;
+
+ if (info) {
+ langName = info.split(/\s+/g)[0];
+ }
+
+ const widgetHandler = env[langName];
+ if (widgetHandler !== undefined) {
+ return widgetHandler(token.content);
+ }
+
+ if (options.highlight) {
+ highlighted = options.highlight(token.content, langName) || escapeHtml(token.content);
+ } else {
+ highlighted = escapeHtml(token.content);
+ }
+
+ return highlighted + '\n';
+}
+
 // highlight inline code
 markdownIt.renderer.rules.code_inline = (tokens, idx, options, env, slf) => {
  const token = tokens[idx];

src/lib/markbind/src/parser.js

@@ -8,6 +8,7 @@ const url = require('url');
 const pathIsInside = require('path-is-inside');
 const slugify = require('@sindresorhus/slugify');
 const componentParser = require('./parsers/componentParser');
+const widget = require('../../../widgets/widgets');
 
 const _ = {};
 _.clone = require('lodash/clone');
@@ -383,6 +384,10 @@ class Parser {
  element.children = element.children.map(e => self._preprocess(e, context, config));
  }
  }
+
+
+ widget.preprocessWidget(config, context, element);
+
  return element;
  }
 
@@ -512,6 +517,8 @@ class Parser {
  break;
  }
 
+ widget.parseWidget(config, context, element);
+
  componentParser.parseComponents(element, this._onError);
 
  if (element.children) {
@@ -568,6 +575,7 @@ class Parser {
  }
  return processed;
  });
+
  resolve(cheerio.html(nodes));
  });
 

src/lib/markbind/src/utils.js

@@ -1,5 +1,6 @@
 const fs = require('fs');
 const path = require('path');
+const cheerio = require('cheerio');
 
 const { markdownFileExts } = require('./constants');
 
@@ -100,4 +101,21 @@ module.exports = {
 
  return text.join('').trim();
  },
+
+ extractCodeElement(element, codeLanguage = '') {
+ let codeBlockElement = cheerio.parseHTML('<div></div>', true)[0];
+
+ element.children.forEach((child) => {
+ if (child.name === 'pre' && child.children.length >= 1) {
+ const [nestedChild] = child.children;
+ if (nestedChild.name !== 'code') {
+ return;
+ }
+ [codeBlockElement] = nestedChild.children;
+ codeBlockElement.data = `\`\`\`${codeLanguage}\n${codeBlockElement.data}\n\`\`\``;
+ }
+ });
+
+ return codeBlockElement;
+ },
 };

docs/userGuide/puml.md

@@ -34,12 +34,15 @@ Name | Type | Default | Description
 --- | --- | --- | ---
 alt | `string` | | **This must be specified.**<br>The alternative text of the diagram.
 height | `string` | | The height of the diagram in pixels.
-src | `string` | | **This must be specified.**<br>The URL of the diagram.<br>The URL can be specified as absolute or relative references. More info in: _[Intra-Site Links]({{baseUrl}}/userGuide/formattingContents.html#intraSiteLinks)_
+src | `string` | | <br>The URL of the diagram if your PUML input is in another file.<br>The URL can be specified as absolute or relative references. More info in: _[Intra-Site Links]({{baseUrl}}/userGuide/formattingContents.html#intraSiteLinks)_
+name | `string` | | The name of the output file.
 width | `string` | | The width of the diagram in pixels.<br>If both width and height are specified, width takes priority over height. It is to maintain the diagram's aspect ratio.
 
 
 ### Example
 
+You could have your PUML be written in a separate file or inline.
+
 <include src="outputBox.md" boilerplate>
 <span id="code">
 
@@ -57,17 +60,33 @@ return success
 @enduml
 ```
 
-_Markbind page_:
+_Markbind page separate file_:
 ```
 <puml src="diagrams/sequence.puml" width=300/>
 ```
 
+_Markbind page inline_:
+`````
+<puml width=300/>
+
+```puml
+@startuml
+alice -> bob ++ : hello
+bob -> bob ++ : self call
+bob -> bib ++ #005500 : hello
+bob -> george ** : create
+return done
+return rc
+bob -> george !! : delete
+return success
+@enduml
+```
+`````
 </span>
 
 <span id="output">
 <pic src="diagrams/sequence.png" width="300" />
 </span>
-
 </include>
 
 <box type="info">

package.json

@@ -26,6 +26,7 @@
  "cheerio": "^0.22.0",
  "chokidar": "^3.3.0",
  "commander": "^3.0.2",
+ "crypto-js": "^3.1.0",
  "fastmatter": "^2.1.1",
  "figlet": "^1.2.4",
  "find-up": "^4.1.0",

src/Page.js

@@ -761,6 +761,7 @@ class Page {
  rootPath: this.rootPath,
  userDefinedVariablesMap: this.userDefinedVariablesMap,
  headerIdMap: this.headerIdMap,
+ resultPath: this.resultPath,
  };
  return new Promise((resolve, reject) => {
  markbinder.includeFile(this.sourcePath, fileConfig)

src/lib/markbind/src/constants.js

@@ -2,6 +2,7 @@ module.exports = {
  // src/lib/markbind/src/parser.js
  ATTRIB_INCLUDE_PATH: 'include-path',
  ATTRIB_CWF: 'cwf',
+ ATTRIB_RESULT_PATH: 'resultPath',
 
  BOILERPLATE_FOLDER_NAME: '_markbind/boilerplates',
 

src/lib/markbind/src/lib/markdown-it/index.js

@@ -42,6 +42,31 @@ markdownIt.renderer.rules.table_close = (tokens, idx) => {
  return '</table></div>';
 };
 
+// rewritten markdown-it renderer.js rule to add a div containing the language of the code block 
+markdownIt.renderer.rules.fence = (tokens, idx, options, env, slf) => {
+ var token = tokens[idx],
+ info = token.info ? markdownIt.utils.unescapeAll(token.info).trim() : '',
+ langName = '',
+ highlighted;
+
+ if (info) {
+ langName = info.split(/\s+/g)[0];
+ }
+
+ const widgetHandler = env[langName];
+ if (widgetHandler !== undefined) {
+ return widgetHandler(token.content);
+ }
+
+ if (options.highlight) {
+ highlighted = options.highlight(token.content, langName) || escapeHtml(token.content);
+ } else {
+ highlighted = escapeHtml(token.content);
+ }
+
+ return highlighted + '\n';
+}
+
 // highlight inline code
 markdownIt.renderer.rules.code_inline = (tokens, idx, options, env, slf) => {
  const token = tokens[idx];

src/lib/markbind/src/parser.js

@@ -8,6 +8,7 @@ const url = require('url');
 const pathIsInside = require('path-is-inside');
 const slugify = require('@sindresorhus/slugify');
 const componentParser = require('./parsers/componentParser');
+const widget = require('../../../widgets/widgets');
 
 const _ = {};
 _.clone = require('lodash/clone');
@@ -383,6 +384,10 @@ class Parser {
  element.children = element.children.map(e => self._preprocess(e, context, config));
  }
  }
+
+
+ widget.preprocessWidget(config, context, element);
+
  return element;
  }
 
@@ -512,6 +517,8 @@ class Parser {
  break;
  }
 
+ widget.parseWidget(config, context, element);
+
  componentParser.parseComponents(element, this._onError);
 
  if (element.children) {
@@ -568,6 +575,7 @@ class Parser {
  }
  return processed;
  });
+
  resolve(cheerio.html(nodes));
  });
 

src/lib/markbind/src/utils.js

@@ -1,5 +1,6 @@
 const fs = require('fs');
 const path = require('path');
+const cheerio = require('cheerio');
 
 const { markdownFileExts } = require('./constants');
 
@@ -100,4 +101,21 @@ module.exports = {
 
  return text.join('').trim();
  },
+
+ extractCodeElement(element, codeLanguage = '') {
+ let codeBlockElement = cheerio.parseHTML('<div></div>', true)[0];
+
+ element.children.forEach((child) => {
+ if (child.name === 'pre' && child.children.length >= 1) {
+ const [nestedChild] = child.children;
+ if (nestedChild.name !== 'code') {
+ return;
+ }
+ [codeBlockElement] = nestedChild.children;
+ codeBlockElement.data = `\`\`\`${codeLanguage}\n${codeBlockElement.data}\n\`\`\``;
+ }
+ });
+
+ return codeBlockElement;
+ },
 };

docs/userGuide/puml.md

@@ -34,12 +34,15 @@ Name | Type | Default | Description
 --- | --- | --- | ---
 alt | `string` | | **This must be specified.**<br>The alternative text of the diagram.
 height | `string` | | The height of the diagram in pixels.
-src | `string` | | **This must be specified.**<br>The URL of the diagram.<br>The URL can be specified as absolute or relative references. More info in: _[Intra-Site Links]({{baseUrl}}/userGuide/formattingContents.html#intraSiteLinks)_
+src | `string` | | <br>The URL of the diagram if your PUML input is in another file.<br>The URL can be specified as absolute or relative references. More info in: _[Intra-Site Links]({{baseUrl}}/userGuide/formattingContents.html#intraSiteLinks)_
+name | `string` | | The name of the output file.
 width | `string` | | The width of the diagram in pixels.<br>If both width and height are specified, width takes priority over height. It is to maintain the diagram's aspect ratio.
 
 
 ### Example
 
+You could have your PUML be written in a separate file or inline.
+
 <include src="outputBox.md" boilerplate>
 <span id="code">
 
@@ -57,17 +60,33 @@ return success
 @enduml
 ```
 
-_Markbind page_:
+_Markbind page separate file_:
 ```
 <puml src="diagrams/sequence.puml" width=300/>
 ```
 
+_Markbind page inline_:
+`````
+<puml width=300/>
+
+```puml
+@startuml
+alice -> bob ++ : hello
+bob -> bob ++ : self call
+bob -> bib ++ #005500 : hello
+bob -> george ** : create
+return done
+return rc
+bob -> george !! : delete
+return success
+@enduml
+```
+`````
 </span>
 
 <span id="output">
 <pic src="diagrams/sequence.png" width="300" />
 </span>
-
 </include>
 
 <box type="info">

package.json

@@ -26,6 +26,7 @@
  "cheerio": "^0.22.0",
  "chokidar": "^3.3.0",
  "commander": "^3.0.2",
+ "crypto-js": "^3.1.0",
  "fastmatter": "^2.1.1",
  "figlet": "^1.2.4",
  "find-up": "^4.1.0",

src/Page.js

@@ -761,6 +761,7 @@ class Page {
  rootPath: this.rootPath,
  userDefinedVariablesMap: this.userDefinedVariablesMap,
  headerIdMap: this.headerIdMap,
+ resultPath: this.resultPath,
  };
  return new Promise((resolve, reject) => {
  markbinder.includeFile(this.sourcePath, fileConfig)

src/lib/markbind/src/constants.js

@@ -2,6 +2,7 @@ module.exports = {
  // src/lib/markbind/src/parser.js
  ATTRIB_INCLUDE_PATH: 'include-path',
  ATTRIB_CWF: 'cwf',
+ ATTRIB_RESULT_PATH: 'resultPath',
 
  BOILERPLATE_FOLDER_NAME: '_markbind/boilerplates',
 

src/lib/markbind/src/lib/markdown-it/index.js

@@ -42,6 +42,31 @@ markdownIt.renderer.rules.table_close = (tokens, idx) => {
  return '</table></div>';
 };
 
+// rewritten markdown-it renderer.js rule to add a div containing the language of the code block 
+markdownIt.renderer.rules.fence = (tokens, idx, options, env, slf) => {
+ var token = tokens[idx],
+ info = token.info ? markdownIt.utils.unescapeAll(token.info).trim() : '',
+ langName = '',
+ highlighted;
+
+ if (info) {
+ langName = info.split(/\s+/g)[0];
+ }
+
+ const widgetHandler = env[langName];
+ if (widgetHandler !== undefined) {
+ return widgetHandler(token.content);
+ }
+
+ if (options.highlight) {
+ highlighted = options.highlight(token.content, langName) || escapeHtml(token.content);
+ } else {
+ highlighted = escapeHtml(token.content);
+ }
+
+ return highlighted + '\n';
+}
+
 // highlight inline code
 markdownIt.renderer.rules.code_inline = (tokens, idx, options, env, slf) => {
  const token = tokens[idx];

src/lib/markbind/src/parser.js

@@ -8,6 +8,7 @@ const url = require('url');
 const pathIsInside = require('path-is-inside');
 const slugify = require('@sindresorhus/slugify');
 const componentParser = require('./parsers/componentParser');
+const widget = require('../../../widgets/widgets');
 
 const _ = {};
 _.clone = require('lodash/clone');
@@ -383,6 +384,10 @@ class Parser {
  element.children = element.children.map(e => self._preprocess(e, context, config));
  }
  }
+
+
+ widget.preprocessWidget(config, context, element);
+
  return element;
  }
 
@@ -512,6 +517,8 @@ class Parser {
  break;
  }
 
+ widget.parseWidget(config, context, element);
+
  componentParser.parseComponents(element, this._onError);
 
  if (element.children) {
@@ -568,6 +575,7 @@ class Parser {
  }
  return processed;
  });
+
  resolve(cheerio.html(nodes));
  });
 

src/lib/markbind/src/utils.js

@@ -1,5 +1,6 @@
 const fs = require('fs');
 const path = require('path');
+const cheerio = require('cheerio');
 
 const { markdownFileExts } = require('./constants');
 
@@ -100,4 +101,21 @@ module.exports = {
 
  return text.join('').trim();
  },
+
+ extractCodeElement(element, codeLanguage = '') {
+ let codeBlockElement = cheerio.parseHTML('<div></div>', true)[0];
+
+ element.children.forEach((child) => {
+ if (child.name === 'pre' && child.children.length >= 1) {
+ const [nestedChild] = child.children;
+ if (nestedChild.name !== 'code') {
+ return;
+ }
+ [codeBlockElement] = nestedChild.children;
+ codeBlockElement.data = `\`\`\`${codeLanguage}\n${codeBlockElement.data}\n\`\`\``;
+ }
+ });
+
+ return codeBlockElement;
+ },
 };

docs/userGuide/puml.md

@@ -34,12 +34,15 @@ Name | Type | Default | Description
 --- | --- | --- | ---
 alt | `string` | | **This must be specified.**<br>The alternative text of the diagram.
 height | `string` | | The height of the diagram in pixels.
-src | `string` | | **This must be specified.**<br>The URL of the diagram.<br>The URL can be specified as absolute or relative references. More info in: _[Intra-Site Links]({{baseUrl}}/userGuide/formattingContents.html#intraSiteLinks)_
+src | `string` | | <br>The URL of the diagram if your PUML input is in another file.<br>The URL can be specified as absolute or relative references. More info in: _[Intra-Site Links]({{baseUrl}}/userGuide/formattingContents.html#intraSiteLinks)_
+name | `string` | | The name of the output file.
 width | `string` | | The width of the diagram in pixels.<br>If both width and height are specified, width takes priority over height. It is to maintain the diagram's aspect ratio.
 
 
 ### Example
 
+You could have your PUML be written in a separate file or inline.
+
 <include src="outputBox.md" boilerplate>
 <span id="code">
 
@@ -57,17 +60,33 @@ return success
 @enduml
 ```
 
-_Markbind page_:
+_Markbind page separate file_:
 ```
 <puml src="diagrams/sequence.puml" width=300/>
 ```
 
+_Markbind page inline_:
+`````
+<puml width=300/>
+
+```puml
+@startuml
+alice -> bob ++ : hello
+bob -> bob ++ : self call
+bob -> bib ++ #005500 : hello
+bob -> george ** : create
+return done
+return rc
+bob -> george !! : delete
+return success
+@enduml
+```
+`````
 </span>
 
 <span id="output">
 <pic src="diagrams/sequence.png" width="300" />
 </span>
-
 </include>
 
 <box type="info">

package.json

@@ -26,6 +26,7 @@
  "cheerio": "^0.22.0",
  "chokidar": "^3.3.0",
  "commander": "^3.0.2",
+ "crypto-js": "^3.1.0",
  "fastmatter": "^2.1.1",
  "figlet": "^1.2.4",
  "find-up": "^4.1.0",

src/Page.js

@@ -761,6 +761,7 @@ class Page {
  rootPath: this.rootPath,
  userDefinedVariablesMap: this.userDefinedVariablesMap,
  headerIdMap: this.headerIdMap,
+ resultPath: this.resultPath,
  };
  return new Promise((resolve, reject) => {
  markbinder.includeFile(this.sourcePath, fileConfig)

src/lib/markbind/src/constants.js

@@ -2,6 +2,7 @@ module.exports = {
  // src/lib/markbind/src/parser.js
  ATTRIB_INCLUDE_PATH: 'include-path',
  ATTRIB_CWF: 'cwf',
+ ATTRIB_RESULT_PATH: 'resultPath',
 
  BOILERPLATE_FOLDER_NAME: '_markbind/boilerplates',
 

src/lib/markbind/src/lib/markdown-it/index.js

@@ -42,6 +42,31 @@ markdownIt.renderer.rules.table_close = (tokens, idx) => {
  return '</table></div>';
 };
 
+// rewritten markdown-it renderer.js rule to add a div containing the language of the code block 
+markdownIt.renderer.rules.fence = (tokens, idx, options, env, slf) => {
+ var token = tokens[idx],
+ info = token.info ? markdownIt.utils.unescapeAll(token.info).trim() : '',
+ langName = '',
+ highlighted;
+
+ if (info) {
+ langName = info.split(/\s+/g)[0];
+ }
+
+ const widgetHandler = env[langName];
+ if (widgetHandler !== undefined) {
+ return widgetHandler(token.content);
+ }
+
+ if (options.highlight) {
+ highlighted = options.highlight(token.content, langName) || escapeHtml(token.content);
+ } else {
+ highlighted = escapeHtml(token.content);
+ }
+
+ return highlighted + '\n';
+}
+
 // highlight inline code
 markdownIt.renderer.rules.code_inline = (tokens, idx, options, env, slf) => {
  const token = tokens[idx];

src/lib/markbind/src/parser.js

@@ -8,6 +8,7 @@ const url = require('url');
 const pathIsInside = require('path-is-inside');
 const slugify = require('@sindresorhus/slugify');
 const componentParser = require('./parsers/componentParser');
+const widget = require('../../../widgets/widgets');
 
 const _ = {};
 _.clone = require('lodash/clone');
@@ -383,6 +384,10 @@ class Parser {
  element.children = element.children.map(e => self._preprocess(e, context, config));
  }
  }
+
+
+ widget.preprocessWidget(config, context, element);
+
  return element;
  }
 
@@ -512,6 +517,8 @@ class Parser {
  break;
  }
 
+ widget.parseWidget(config, context, element);
+
  componentParser.parseComponents(element, this._onError);
 
  if (element.children) {
@@ -568,6 +575,7 @@ class Parser {
  }
  return processed;
  });
+
  resolve(cheerio.html(nodes));
  });
 

src/lib/markbind/src/utils.js

@@ -1,5 +1,6 @@
 const fs = require('fs');
 const path = require('path');
+const cheerio = require('cheerio');
 
 const { markdownFileExts } = require('./constants');
 
@@ -100,4 +101,21 @@ module.exports = {
 
  return text.join('').trim();
  },
+
+ extractCodeElement(element, codeLanguage = '') {
+ let codeBlockElement = cheerio.parseHTML('<div></div>', true)[0];
+
+ element.children.forEach((child) => {
+ if (child.name === 'pre' && child.children.length >= 1) {
+ const [nestedChild] = child.children;
+ if (nestedChild.name !== 'code') {
+ return;
+ }
+ [codeBlockElement] = nestedChild.children;
+ codeBlockElement.data = `\`\`\`${codeLanguage}\n${codeBlockElement.data}\n\`\`\``;
+ }
+ });
+
+ return codeBlockElement;
+ },
 };

docs/userGuide/puml.md

@@ -34,12 +34,15 @@ Name | Type | Default | Description
 --- | --- | --- | ---
 alt | `string` | | **This must be specified.**<br>The alternative text of the diagram.
 height | `string` | | The height of the diagram in pixels.
-src | `string` | | **This must be specified.**<br>The URL of the diagram.<br>The URL can be specified as absolute or relative references. More info in: _[Intra-Site Links]({{baseUrl}}/userGuide/formattingContents.html#intraSiteLinks)_
+src | `string` | | <br>The URL of the diagram if your PUML input is in another file.<br>The URL can be specified as absolute or relative references. More info in: _[Intra-Site Links]({{baseUrl}}/userGuide/formattingContents.html#intraSiteLinks)_
+name | `string` | | The name of the output file.
 width | `string` | | The width of the diagram in pixels.<br>If both width and height are specified, width takes priority over height. It is to maintain the diagram's aspect ratio.
 
 
 ### Example
 
+You could have your PUML be written in a separate file or inline.
+
 <include src="outputBox.md" boilerplate>
 <span id="code">
 
@@ -57,17 +60,33 @@ return success
 @enduml
 ```
 
-_Markbind page_:
+_Markbind page separate file_:
 ```
 <puml src="diagrams/sequence.puml" width=300/>
 ```
 
+_Markbind page inline_:
+`````
+<puml width=300/>
+
+```puml
+@startuml
+alice -> bob ++ : hello
+bob -> bob ++ : self call
+bob -> bib ++ #005500 : hello
+bob -> george ** : create
+return done
+return rc
+bob -> george !! : delete
+return success
+@enduml
+```
+`````
 </span>
 
 <span id="output">
 <pic src="diagrams/sequence.png" width="300" />
 </span>
-
 </include>
 
 <box type="info">

package.json

@@ -26,6 +26,7 @@
  "cheerio": "^0.22.0",
  "chokidar": "^3.3.0",
  "commander": "^3.0.2",
+ "crypto-js": "^3.1.0",
  "fastmatter": "^2.1.1",
  "figlet": "^1.2.4",
  "find-up": "^4.1.0",

src/Page.js

@@ -761,6 +761,7 @@ class Page {
  rootPath: this.rootPath,
  userDefinedVariablesMap: this.userDefinedVariablesMap,
  headerIdMap: this.headerIdMap,
+ resultPath: this.resultPath,
  };
  return new Promise((resolve, reject) => {
  markbinder.includeFile(this.sourcePath, fileConfig)

src/lib/markbind/src/constants.js

@@ -2,6 +2,7 @@ module.exports = {
  // src/lib/markbind/src/parser.js
  ATTRIB_INCLUDE_PATH: 'include-path',
  ATTRIB_CWF: 'cwf',
+ ATTRIB_RESULT_PATH: 'resultPath',
 
  BOILERPLATE_FOLDER_NAME: '_markbind/boilerplates',
 

src/lib/markbind/src/lib/markdown-it/index.js

@@ -42,6 +42,31 @@ markdownIt.renderer.rules.table_close = (tokens, idx) => {
  return '</table></div>';
 };
 
+// rewritten markdown-it renderer.js rule to add a div containing the language of the code block 
+markdownIt.renderer.rules.fence = (tokens, idx, options, env, slf) => {
+ var token = tokens[idx],
+ info = token.info ? markdownIt.utils.unescapeAll(token.info).trim() : '',
+ langName = '',
+ highlighted;
+
+ if (info) {
+ langName = info.split(/\s+/g)[0];
+ }
+
+ const widgetHandler = env[langName];
+ if (widgetHandler !== undefined) {
+ return widgetHandler(token.content);
+ }
+
+ if (options.highlight) {
+ highlighted = options.highlight(token.content, langName) || escapeHtml(token.content);
+ } else {
+ highlighted = escapeHtml(token.content);
+ }
+
+ return highlighted + '\n';
+}
+
 // highlight inline code
 markdownIt.renderer.rules.code_inline = (tokens, idx, options, env, slf) => {
  const token = tokens[idx];

src/lib/markbind/src/parser.js

@@ -8,6 +8,7 @@ const url = require('url');
 const pathIsInside = require('path-is-inside');
 const slugify = require('@sindresorhus/slugify');
 const componentParser = require('./parsers/componentParser');
+const widget = require('../../../widgets/widgets');
 
 const _ = {};
 _.clone = require('lodash/clone');
@@ -383,6 +384,10 @@ class Parser {
  element.children = element.children.map(e => self._preprocess(e, context, config));
  }
  }
+
+
+ widget.preprocessWidget(config, context, element);
+
  return element;
  }
 
@@ -512,6 +517,8 @@ class Parser {
  break;
  }
 
+ widget.parseWidget(config, context, element);
+
  componentParser.parseComponents(element, this._onError);
 
  if (element.children) {
@@ -568,6 +575,7 @@ class Parser {
  }
  return processed;
  });
+
  resolve(cheerio.html(nodes));
  });
 

src/lib/markbind/src/utils.js

@@ -1,5 +1,6 @@
 const fs = require('fs');
 const path = require('path');
+const cheerio = require('cheerio');
 
 const { markdownFileExts } = require('./constants');
 
@@ -100,4 +101,21 @@ module.exports = {
 
  return text.join('').trim();
  },
+
+ extractCodeElement(element, codeLanguage = '') {
+ let codeBlockElement = cheerio.parseHTML('<div></div>', true)[0];
+
+ element.children.forEach((child) => {
+ if (child.name === 'pre' && child.children.length >= 1) {
+ const [nestedChild] = child.children;
+ if (nestedChild.name !== 'code') {
+ return;
+ }
+ [codeBlockElement] = nestedChild.children;
+ codeBlockElement.data = `\`\`\`${codeLanguage}\n${codeBlockElement.data}\n\`\`\``;
+ }
+ });
+
+ return codeBlockElement;
+ },
 };