Webview enhancements

CHANGELOG.md

@@ -6,6 +6,10 @@ This file is structured according to the [Keep a Changelog](http://keepachangelo
 
 ## [Unreleased]
 
+- Find widget enabled in the preview window
+- Support for anchor links
+- Support for task/todo lists
+
 ## [v0.1.0]
 
 - Initial release

README.md

@@ -43,6 +43,12 @@ Tothom will not render the <key>▶️</key> _Run in terminal_ button for code b
 
 ## Release Notes
 
+### Unreleased
+
+- Find widget enabled in the preview window
+- Support for anchor links
+- Support for task/todo lists
+
 ### v0.1.0
 
 Initial release.

media/github-markdown.css

@@ -855,6 +855,15 @@ body,
 .tothom-body ol ul {
   margin-top: 0;
   margin-bottom: 0;
+  padding-left: 2em;
+}
+
+.tothom-body .contains-task-list {
+  padding: 0 0.7em;
+}
+
+.tothom-body li.task-list-item {
+  list-style-type: none;
 }
 
 .tothom-body li>p {

package.json

@@ -87,21 +87,22 @@
     "test": "node ./out/test/runTest.js"
   },
   "devDependencies": {
-    "@types/vscode": "^1.74.0",
     "@types/glob": "^8.0.0",
     "@types/mocha": "^10.0.1",
     "@types/node": "16.x",
+    "@types/vscode": "^1.74.0",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
+    "@vscode/test-electron": "^2.2.0",
     "eslint": "^8.28.0",
     "glob": "^8.0.3",
     "mocha": "^10.1.0",
-    "typescript": "^4.9.3",
-    "@vscode/test-electron": "^2.2.0"
+    "typescript": "^4.9.3"
   },
   "dependencies": {
     "highlight.js": "^11.7.0",
     "markdown-it": "^13.0.1",
+    "markdown-it-task-lists": "^2.1.1",
     "url-parse": "^1.5.10"
   }
 }

samples/tothom.md

@@ -0,0 +1,56 @@
+# Tothom
+
+- [Hello World!](#hello-world)
+- [Interpolation](#interpolation)
+- [Multiline](#multiline)
+- [Compatibility](#compatibility)
+  - [Unordered Lists](#unordered-lists)
+  - [Ordered Lists](#ordered-lists)
+  - [Task lists](#task-lists)
+  - [Links](#links)
+
+## Hello World!
+
+```sh
+echo 'Hello World!'
+```
+
+## Interpolation
+
+```sh
+echo "Current directory is $PWD"
+```
+
+## Multiline
+
+```sh
+cat <<EOF
+This is a
+multiline
+code block
+EOF
+```
+
+## Compatibility
+
+### Unordered Lists
+
+- Item 1
+- Item 2
+- Item 3
+
+### Ordered Lists
+
+1. Item 1
+2. Item 2
+3. Item 3
+
+### Task lists
+
+- [x] Item 1
+- [ ] Item 2
+- [ ] Item 3
+
+### Links
+
+External [link](https://marketplace.visualstudio.com/items?itemName=guicassolato.tothom).

src/engine.ts

@@ -0,0 +1,40 @@
+import hljs from 'highlight.js';
+
+import * as terminal from './terminal';
+
+const renderCodeBlock = (code: string, language: string): string => {
+  const codeAttrs = (language !== "") ? ` class="language-${language}"` : '';
+
+  let link = "";
+  switch (language) {
+    case 'bash':
+    case 'sh':
+    case 'zsh':
+      link = `<a href="tothom://?code=${terminal.encodeTerminalCommand(code, true)}" class="tothom-code-action" title="Run in terminal">▶️</a>`;
+      break;
+    default:
+      break;
+  }
+
+  return `<pre class="hljs"><code${codeAttrs}>${syntaxHighlight(code, language)}</code>${link}</pre>`;
+};
+
+const syntaxHighlight = (code: string, language: string): string => {
+  if (language && hljs.getLanguage(language)) {
+    try {
+      return hljs.highlight(code, { language: language, ignoreIllegals: true }).value;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+  return engine.utils.escapeHtml(code);
+};
+
+const taskLists = require('markdown-it-task-lists');
+
+export const engine = require('markdown-it')({
+  html: true,
+  linkify: true,
+  typographer: true,
+  highlight: renderCodeBlock
+}).use(taskLists);