diff --git a/.editorconfig b/.editorconfig
index 2d1f06a..e9f48ba 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -4,7 +4,7 @@ root = true
 
 [*]
 indent_style = space
-indent_size = 2
+indent_size = 2 
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
@@ -15,7 +15,7 @@ indent_style = space
 indent_size = 2
 
 [*.md]
-max_line_length = 90
+max_line_length = 140
 indent_style = space
 indent_size = 2
 end_of_line = lf
diff --git a/package.json b/package.json
index 739d46a..b7e5dc0 100644
--- a/package.json
+++ b/package.json
@@ -21,13 +21,31 @@
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.26.1",
     "@types/node": "^20.12.4",
-    "@types/obsidian-typings": "github:Fevol/obsidian-typings",
-    "@typescript-eslint/eslint-plugin": "^7.5.0",
-    "@typescript-eslint/parser": "^7.5.0",
     "builtin-modules": "3.3.0",
     "esbuild": "0.20.2",
     "eslint": "^8.57.0",
+    "@html-eslint/eslint-plugin": "^0.24.0",
+    "@html-eslint/parser": "^0.24.0",
+    "@types/obsidian-typings": "github:Fevol/obsidian-typings",
+    "@typescript-eslint/eslint-plugin": "^7.5.0",
+    "@typescript-eslint/parser": "^7.5.0",
+    "@typescript-eslint/utils": "^7.5.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-css": "^0.9.2",
+    "eslint-plugin-eslint-comments": "^3.2.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsonc": "^2.15.0",
+    "eslint-plugin-mdx": "^3.1.5",
+    "eslint-plugin-only-warn": "^1.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-tsdoc": "^0.2.17",
+    "eslint-plugin-yml": "^1.14.0",
     "prettier": "^3.2.5",
+    "remark-preset-lint-consistent": "^5.1.2",
+    "remark-preset-lint-markdown-style-guide": "^5.1.3",
+    "remark-preset-lint-recommended": "^6.1.3",
+    "remark-preset-prettier": "^2.0.1",
     "tslib": "^2.6.2",
     "typescript": "5.4.4",
     "obsidian": "1.5.7"
diff --git a/prettier.config.cjs b/prettier.config.cjs
index 1a28e50..937d3b3 100644
--- a/prettier.config.cjs
+++ b/prettier.config.cjs
@@ -1,4 +1,3 @@
-// eslint-disable-next-line tsdoc/syntax -- ignore for prettier config
 /** @type {import("prettier").Config} */
 const config = {
   plugins: [
diff --git a/src/main.ts b/src/main.ts
index 25ee139..eef1b86 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,32 +1,19 @@
 import { Extension } from '@codemirror/state';
-import {
-  debounce,
-  MarkdownPostProcessor,
-  MarkdownPreviewRenderer,
-  Platform,
-  Plugin,
-} from 'obsidian';
+import { debounce, MarkdownPostProcessor, MarkdownPreviewRenderer, Platform, Plugin } from 'obsidian';
 import { buildLinksAndReferences, setPluginVariableForIndexer } from './indexer';
-import {
-  InlineReferenceExtension,
-  setPluginVariableForCM6InlineReferences,
-} from './view-extensions/references-cm6';
+import { InlineReferenceExtension, setPluginVariableForCM6InlineReferences } from './view-extensions/references-cm6';
 import { setPluginVariableForHtmlDecorations } from './view-extensions/htmlDecorations';
 import markdownPreviewProcessor, {
-  setPluginVariableForMarkdownPreviewProcessor,
+  setPluginVariableForMarkdownPreviewProcessor
 } from './view-extensions/references-preview';
-import ReferenceGutterExtension, {
-  setPluginVariableForCM6Gutter,
-} from './view-extensions/gutters-cm6';
-import setHeaderWithReferenceCounts, {
-  setPluginVariableForHeaderRefCount,
-} from './ui/headerRefCount';
+import ReferenceGutterExtension, { setPluginVariableForCM6Gutter } from './view-extensions/gutters-cm6';
+import setHeaderWithReferenceCounts, { setPluginVariableForHeaderRefCount } from './ui/headerRefCount';
 import { SideBarPaneView, VIEW_TYPE_SNW } from './ui/sidebar-pane';
 import { SettingsTab, Settings, DEFAULT_SETTINGS } from './ui/settingsTab';
 import SnwAPI from './snwApi';
 import { setPluginVariableForUIC } from './ui/components/uic-ref--parent';
-import PluginCommands from './pluginCommands';
 import { setPluginVariableUIC_RefArea } from './ui/components/uic-ref-area';
+import PluginCommands from './PluginCommands';
 
 export default class SNWPlugin extends Plugin {
   appName = this.manifest.name;
@@ -62,8 +49,7 @@ export default class SNWPlugin extends Plugin {
     this.addSettingTab(new SettingsTab(this.app, this));
 
     // set current state based on startup parameters
-    if (Platform.isMobile || Platform.isMobileApp)
-      this.showCountsActive = this.settings.enableOnStartupMobile;
+    if (Platform.isMobile || Platform.isMobileApp) this.showCountsActive = this.settings.enableOnStartupMobile;
     else this.showCountsActive = this.settings.enableOnStartupDesktop;
 
     this.registerView(VIEW_TYPE_SNW, (leaf) => new SideBarPaneView(leaf, this));
@@ -83,7 +69,7 @@ export default class SNWPlugin extends Plugin {
 
     this.app.workspace.registerHoverLinkSource(this.appID, {
       display: this.appName,
-      defaultMod: true,
+      defaultMod: true
     });
 
     this.snwAPI.settings = this.settings;
@@ -97,9 +83,7 @@ export default class SNWPlugin extends Plugin {
 
     this.app.workspace.onLayoutReady(async () => {
       if (!this.app.workspace.getLeavesOfType(VIEW_TYPE_SNW)?.length) {
-        await this.app.workspace
-          .getRightLeaf(false)
-          .setViewState({ type: VIEW_TYPE_SNW, active: false });
+        await this.app.workspace.getRightLeaf(false).setViewState({ type: VIEW_TYPE_SNW, active: false });
       }
       const resolved = this.app.metadataCache.on('resolved', async () => {
         buildLinksAndReferences();
@@ -121,21 +105,13 @@ export default class SNWPlugin extends Plugin {
    * @param {number} lineNu
    * @memberof ThePlugin
    */
-  async activateView(
-    refType: string,
-    realLink: string,
-    key: string,
-    filePath: string,
-    lineNu: number
-  ) {
+  async activateView(refType: string, realLink: string, key: string, filePath: string, lineNu: number) {
     this.lastSelectedReferenceType = refType;
     this.lastSelectedReferenceRealLink = realLink;
     this.lastSelectedReferenceKey = key;
     this.lastSelectedReferenceFilePath = filePath;
     this.lastSelectedLineNumber = lineNu;
-    await (
-      this.app.workspace.getLeavesOfType(VIEW_TYPE_SNW)[0].view as SideBarPaneView
-    ).updateView();
+    await (this.app.workspace.getLeavesOfType(VIEW_TYPE_SNW)[0].view as SideBarPaneView).updateView();
     this.app.workspace.revealLeaf(this.app.workspace.getLeavesOfType(VIEW_TYPE_SNW)[0]);
   }
 
@@ -156,14 +132,8 @@ export default class SNWPlugin extends Plugin {
    * @memberof ThePlugin
    */
   toggleStateSNWMarkdownPreview(): void {
-    if (
-      this.settings.displayInlineReferencesMarkdown &&
-      this.showCountsActive &&
-      this.markdownPostProcessor === null
-    ) {
-      this.markdownPostProcessor = this.registerMarkdownPostProcessor((el, ctx) =>
-        markdownPreviewProcessor(el, ctx)
-      );
+    if (this.settings.displayInlineReferencesMarkdown && this.showCountsActive && this.markdownPostProcessor === null) {
+      this.markdownPostProcessor = this.registerMarkdownPostProcessor((el, ctx) => markdownPreviewProcessor(el, ctx));
     } else {
       if (!this.markdownPostProcessor) {
         console.log('Markdown post processor is not registered');
@@ -211,11 +181,7 @@ export default class SNWPlugin extends Plugin {
    * @param {Extension} extension
    * @memberof ThePlugin
    */
-  updateCMExtensionState(
-    extensionIdentifier: string,
-    extensionState: boolean,
-    extension: Extension
-  ) {
+  updateCMExtensionState(extensionIdentifier: string, extensionState: boolean, extension: Extension) {
     if (extensionState == true) {
       this.editorExtensions.push(extension);
       // @ts-ignore
diff --git a/src/ui/sidebar-pane.tsx b/src/ui/sidebar-pane.tsx
index ffad45a..3b333ad 100644
--- a/src/ui/sidebar-pane.tsx
+++ b/src/ui/sidebar-pane.tsx
@@ -33,9 +33,7 @@ export class SideBarPaneView extends ItemView {
     render(
       <div class="snw-sidepane-loading">
         <div class="snw-sidepane-loading-banner">Discovering Strange New Worlds...</div>
-        <div class="snw-sidepane-loading-subtext">
-          Click a reference counter in the main document for information to appear here.
-        </div>
+        <div class="snw-sidepane-loading-subtext">Click a reference counter in the main document for information to appear here.</div>
       </div>,
       this.containerEl
     );
@@ -49,22 +47,11 @@ export class SideBarPaneView extends ItemView {
     const lineNu = this.thePlugin.lastSelectedLineNumber;
 
     if (this.thePlugin.snwAPI.enableDebugging.SidePane) {
-      this.thePlugin.snwAPI.console(
-        'sidepane.open() refType, realLink, key, filePath',
-        refType,
-        realLink,
-        key,
-        filePath
-      );
-      this.thePlugin.snwAPI.console(
-        'sidepane.open() getReferencesCache()',
-        getReferencesCache()
-      );
+      this.thePlugin.snwAPI.console('sidepane.open() refType, realLink, key, filePath', refType, realLink, key, filePath);
+      this.thePlugin.snwAPI.console('sidepane.open() getReferencesCache()', getReferencesCache());
     }
 
-    this.containerEl.replaceChildren(
-      await getUIC_SidePane(refType, realLink, key, filePath, lineNu)
-    );
+    this.containerEl.replaceChildren(await getUIC_SidePane(refType, realLink, key, filePath, lineNu));
 
     scrollResultsIntoView(this.containerEl);
   }
diff --git a/src/view-extensions/htmlDecorations.ts b/src/view-extensions/htmlDecorations.tsx
similarity index 82%
rename from src/view-extensions/htmlDecorations.ts
rename to src/view-extensions/htmlDecorations.tsx
index 501fe0d..894a1c5 100644
--- a/src/view-extensions/htmlDecorations.ts
+++ b/src/view-extensions/htmlDecorations.tsx
@@ -3,6 +3,7 @@ import tippy from 'tippy.js';
 import 'tippy.js/dist/tippy.css';
 import { getUIC_Hoverview } from 'src/ui/components/uic-ref--parent';
 import { Platform } from 'obsidian';
+import { render } from 'preact';
 
 let thePlugin: SNWPlugin;
 
@@ -44,27 +45,32 @@ export function htmlDecorationForReferencesElement(
       filePath
     );
 
-  const element = createDiv({ cls: 'snw-reference snw-' + referenceType });
-  element.innerText = count.toString();
-  element.setAttribute('data-snw-type', referenceType);
-  element.setAttribute('data-snw-reallink', realLink);
-  element.setAttribute('data-snw-key', key);
-  element.setAttribute('data-snw-filepath', filePath);
-  element.setAttribute('snw-data-line-number', lineNu.toString());
-  if (attachCSSClass) element.addClass(attachCSSClass);
+  const referenceElementJsx = (
+    <div
+      className={'snw-reference snw-' + referenceType + ' ' + attachCSSClass}
+      data-snw-type={referenceType}
+      data-snw-reallink={realLink}
+      data-snw-key={key}
+      data-snw-filepath={filePath}
+      snw-data-line-number={lineNu.toString()}>
+      {count.toString()}
+    </div>
+  );
+
+  const refenceElement = createDiv();
+  render(referenceElementJsx, refenceElement);
+  const refCountBox = refenceElement.firstElementChild as HTMLElement;
 
   if (Platform.isDesktop || Platform.isDesktopApp)
     //click is default to desktop, otherwise mobile behaves differently
-    element.onclick = async (e: MouseEvent) =>
-      processHtmlDecorationReferenceEvent(e.target as HTMLElement);
+    refCountBox.onclick = async (e: MouseEvent) => processHtmlDecorationReferenceEvent(e.target as HTMLElement);
 
-  if (thePlugin?.snwAPI.enableDebugging?.HtmlDecorationElements)
-    thePlugin.snwAPI.console('returned element', element);
+  if (thePlugin?.snwAPI.enableDebugging?.HtmlDecorationElements) thePlugin.snwAPI.console('returned element', refenceElement);
 
   const requireModifierKey = thePlugin.settings.requireModifierKeyToActivateSNWView;
   // defaults to showing tippy on hover, but if requireModifierKey is true, then only show on ctrl/meta key
   let showTippy = true;
-  const tippyObject = tippy(element, {
+  const tippyObject = tippy(refCountBox, {
     interactive: true,
     appendTo: () => document.body,
     allowHTML: true,
@@ -87,12 +93,12 @@ export function htmlDecorationForReferencesElement(
       setTimeout(async () => {
         await getUIC_Hoverview(instance);
       }, 1);
-    },
+    }
   });
 
   tippyObject.popper.classList.add('snw-tippy');
 
-  return element;
+  return refenceElement;
 }
 
 export /**