Skip to content

About

A Markdown file viewer and editor addin for the Clarion IDE with split-pane live preview

Resources

Readme
MIT license
Activity

Stars

3 stars

Watchers

3 watching

Forks

2 forks
Report repository
BranchesTags
 
 

Repository files navigation

ClarionMarkdownEditor

A modern Markdown file viewer and editor addin for the Clarion IDE. Features a split-pane interface with live preview, syntax highlighting, dark mode, scroll synchronization, and seamless IDE integration.

Clarion IDE Addin .NET Framework 4.8 WebView2 License

Features

  • Split-Pane Editor: Side-by-side markdown source and live HTML preview

  • Live Preview: Real-time rendering as you type

  • Mermaid Diagrams: Create flowcharts, sequence diagrams, ERDs, Gantt charts, and more

    • Just use ```mermaid code blocks
    • See MermaidExample.md for examples
    • Supports all Mermaid diagram types (flowchart, sequence, ER, Gantt, state, class, etc.)

  • Syntax Highlighting: Full code syntax highlighting powered by Highlight.js

    • Custom Clarion language definition included
    • Supports 190+ languages (JavaScript, Python, C#, SQL, etc.)
    • Atom One Dark theme (works in both light and dark modes)

    To use syntax highlighting, open a fenced code block with three backticks followed by the language name, e.g.:

    ```clarion
MyProc PROCEDURE
CODE
  MESSAGE('Hello from Clarion!')
  RETURN
```

    …which renders as:

    MyProc PROCEDURE
CODE
  MESSAGE('Hello from Clarion!')
  RETURN

  • Dark Mode: Toggle between light and dark themes via View > Dark Mode or the 🌓 button on the Start Page — preference is remembered across sessions

  • Scroll Synchronization: Bidirectional scroll sync between editor and preview (toggleable)

  • Horizontal Scrolling: Long lines scroll instead of wrapping

  • Expand/Collapse Preview: Toggle between split view and full-width preview mode; your last choice is remembered for new tabs

  • Resizable Panes: Drag the splitter between editor and preview (side by side or stacked); double-click it to reset to 50/50

  • Auto-Refresh: Open files reload automatically when changed on disk by another program (VS Code, an AI tool, etc.); tabs with unsaved edits show a ↻ badge instead of being overwritten

  • Drag and Drop: Drag .md files from Windows Explorer onto the editor to open them

  • Formatting Toolbar: Quick buttons for common markdown syntax:

    • Bold, Italic, Inline Code, Code Blocks
    • Headers (H1, H2, H3)
    • Bullet Lists, Numbered Lists
    • Blockquotes, Horizontal Rules
    • Links, Images, Tables

  • File Operations: New, Open, Save, Save As

  • Open Markdown from URL: Load a Markdown document directly from a URL — raw URLs, github.com/owner/repo/blob/..., or just github.com/owner/repo (auto-resolves to README.md on main, falling back to master). URL-loaded tabs are read-only with a 🔒 badge; Save As promotes them into editable local files. Relative images and links resolve against the source URL, and clicking a relative .md link opens it as a new tab. Fetched bodies are cached under %APPDATA%\ClarionMarkdownEditor\cache\ with conditional GETs, so reopens are fast and a stale copy is served when offline. Available via Tools → Open Markdown from URL... or the 🌐 Open URL... button on the Start Page (Recent URLs list included)

  • Start Page: New / Open / Open URL actions and your Recent Files and Recent URLs, with the running version shown beside the title

  • About Dialog: Version, install folder and credits (File → About...)

  • Keyboard Shortcuts:

    • Ctrl+Shift+K - Open the Markdown Editor
    • Ctrl+S - Save current document
    • Ctrl+B - Bold
    • Ctrl+I - Italic
    • All formatting shortcuts support undo (Ctrl+Z)

  • Dockable: Opens as a document tab that can be dragged to sit beside your source files or floated onto another monitor

  • File Type Handler: Opening a .md or .markdown file in the IDE automatically opens it in the Markdown Editor — all files share a single editor instance with internal tabs

  • Remembers Settings: Last opened folder, dark mode, Expand/Split preference, split ratio and split direction are saved between sessions

  • Dirty Indicator: The editor tab shows * when a document has unsaved changes — clears automatically when changes are undone back to the last-saved state

Requirements

Runtime (End Users)

Development (Building from Source)

  • .NET SDK (any modern version — used to run dotnet build)
  • Clarion IDE installed (for reference DLLs)

Note: Visual Studio is not required. The .NET SDK is a free, lightweight command-line toolchain. Download the latest version from https://dotnet.microsoft.com/download and run the installer — dotnet build will then be available in any terminal.

Recommended IDEs

You can open ClarionMarkdownEditor.sln in any of the following:

  • Visual Studio Code (free, lightweight) Recommended extensions:

    • C# Dev Kit — IntelliSense, build, debug
    • C# — language support (installed with C# Dev Kit)
    • NuGet Gallery — browse and manage NuGet packages
    • XML — syntax support for .addin and .props files

  • Visual Studio Community (free for open source) Open the .sln file directly — all packages restore automatically on first build.

  • JetBrains Rider (commercial, free for open source) Full .NET IDE with excellent SDK-style project support.

Installation

From Release

The easiest route is Clarion Addin Finder, which installs and updates the editor for you. To install by hand:

  1. Download the latest release

  2. Copy all files to:

    {CLARION_PATH}\accessory\addins\ClarionMarkdownEditor\

    Keep only one copy of the editor under accessory\addins. Clarion refuses to start if two folders contain the same addin ("Identity name used by multiple addins"), so remove any older copy (for example accessory\addins\MarkdownEditor\) first. File → About... in the editor shows the running version and the folder it was loaded from.

    Required files (the .addin must be in the root of that folder):

    • ClarionMarkdownEditor.dll
    • ClarionMarkdownEditor.addin
    • Microsoft.Web.WebView2.Core.dll
    • Microsoft.Web.WebView2.WinForms.dll
    • Microsoft.Web.WebView2.Wpf.dll
    • WebView2Loader.dll
    • Resources\markdown-editor.html
    • Resources\markdown-editor.css
    • Resources\markdown-editor.js
    • Resources\marked.min.js
    • Resources\highlight.min.js
    • Resources\atom-one-dark.min.css

  3. Unblock the DLLs — Windows tags files extracted from a downloaded zip with "mark-of-the-web", which prevents .NET from loading them. Either:

    • Right-click the zip before extracting → Properties → tick Unblock → OK, then extract, or
    • After extracting, run this in PowerShell against the install folder: 
      Get-ChildItem "{CLARION_PATH}\accessory\addins\ClarionMarkdownEditor" -Recurse | Unblock-File

  4. Ensure WebView2 Runtime is installed

  5. Restart Clarion IDE

Building from Source

  1. Clone this repository

    git clone https://github.com/msarson/ClarionMarkdownEditor.git
cd ClarionMarkdownEditor

  2. Configure your Clarion path

    The project uses Directory.Build.props to locate your Clarion installation. The default path is C:\Clarion12\bin.

    If your Clarion is installed elsewhere (most setups), copy ClarionMarkdownEditor\Directory.Build.props.user.example to ClarionMarkdownEditor\Directory.Build.props.user (gitignored, so it stays on your machine) and set your path:

    <Project>
  <PropertyGroup>
    <ClarionBin>C:\Clarion\Clarion11.1\bin</ClarionBin>
  </PropertyGroup>
</Project>

    Both the build and deploy.ps1 read this file, so this is the only place your path lives.

    Alternatively, set the CLARION_BIN environment variable before building:

    $env:CLARION_BIN = "C:\Clarion\Clarion11.1\bin"

  3. Build — NuGet packages (including WebView2) are restored automatically:

    dotnet build ClarionMarkdownEditor\ClarionMarkdownEditor.csproj -c Release

  4. Deploy to Clarion

    The quickest way is the deploy script, which builds, refuses to run while Clarion is open, copies everything below, verifies each file by hash and warns about duplicate copies:

    .\deploy.ps1                                    # the Clarion set in Directory.Build.props.user
.\deploy.ps1 -ClarionRoot C:\Clarion\Clarion11.1  # or any other install

    Or copy by hand from ClarionMarkdownEditor\bin\Release\net48\ to {CLARION_PATH}\accessory\addins\ClarionMarkdownEditor\:

    • ClarionMarkdownEditor.dll
    • ClarionMarkdownEditor.addin
    • Microsoft.Web.WebView2.Core.dll
    • Microsoft.Web.WebView2.WinForms.dll
    • Microsoft.Web.WebView2.Wpf.dll
    • WebView2Loader.dll
    • Resources\markdown-editor.html
    • Resources\markdown-editor.css
    • Resources\markdown-editor.js
    • Resources\marked.min.js
    • Resources\highlight.min.js
    • Resources\atom-one-dark.min.css

  5. Restart Clarion IDE

Releasing

The version is set in one place: <Version> in ClarionMarkdownEditor\ClarionMarkdownEditor.csproj. The build uses it for the DLL's version attributes and stamps it into the <Identity version> of the ClarionMarkdownEditor.addin copied to the output folder. Always ship the .addin from the build output, not the source copy.

Release zips are named ClarionMarkdownEditor-v<version>.zip and contain the files listed above with the .addin in the zip root. Clarion Addin Finder and the ClarionAssistant installer both download that asset, so keep the name and layout unchanged. See CHANGELOG.md for release history.

Screenshots

┌─────────────────────────────────────────────────────────────┐
│ File  View                                                  │
├─────────────────────────────────────────────────────────────┤
│ Start Page │ README.md │ notes.md * │                       │
├─────────────────────────────────────────────────────────────┤
│ B │ I │ </> │ {} │ Link │ Img │ H1 │ H2 │ H3 │ List │ ...   │
├────────────────────────────┬┬───────────────────────────────┤
│ MARKDOWN                   ││ PREVIEW               [Expand]│
├────────────────────────────┼┼───────────────────────────────┤
│ # My Document              ││ My Document                   │
│                            ││ ───────────                   │
│ This is **bold** text.     ││ This is bold text.            │
│                            ││                               │
│ - Item 1                   ││ • Item 1                      │
│ - Item 2                   ││ • Item 2                      │
└────────────────────────────┴┴───────────────────────────────┘

The double line between the panes is the splitter: drag it to resize.

Expanded Preview Mode

┌─────────────────────────────────────────────────────────────┐
│ PREVIEW                                              [Split]│
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  My Document                                                │
│  ───────────────────────────────────────────                │
│                                                             │
│  This is bold text.                                         │
│                                                             │
│  • Item 1                                                   │
│  • Item 2                                                   │
│                                                             │
└─────────────────────────────────────────────────────────────┘

Usage

Opening the Editor

  • Keyboard: Press Ctrl+Shift+K
  • Menu: Go to Tools → Markdown Editor
  • File: Open any .md / .markdown file in the IDE

The editor opens as a single document tab holding all your Markdown files as internal tabs. Like any document tab it can be dragged to sit beside your source code or floated onto another monitor.

Earlier versions also had a separate Markdown Editor (Pad). It was removed in v1.5.0 because the document tab can be docked the same way; if you had the pad docked, drag the document tab to that spot instead.

Editing Markdown

  1. Use Open File on the Start Page (or File → Open...), drag a file in from Explorer, or click New File to start a new document
  2. Use the formatting toolbar for quick markdown syntax insertion
  3. Preview updates in real-time as you type

Preview Modes

  • Split View: Editor and preview side-by-side (default)
  • Expanded Preview: Click Expand button to hide the editor and view preview full-width
  • Return to Split: Click Split button to restore side-by-side view

Supported Markdown Syntax

Element Syntax
Heading 1 # Heading
Heading 2 ## Heading
Heading 3 ### Heading
Bold **bold** or __bold__
Italic *italic* or _italic_
Inline Code `code`
Code Block ```language ... ```
Link [text](url)
Image ![alt](url)
Unordered List - item or * item
Ordered List 1. item
Blockquote > quote
Horizontal Rule --- or ***
Table `

Project Structure

ClarionMarkdownEditor/
├── ClarionMarkdownEditor.sln
├── deploy.ps1                           # Build + verified deploy into a local Clarion
├── addin-config.json
├── CHANGELOG.md
├── README.md
└── ClarionMarkdownEditor/
    ├── ClarionMarkdownEditor.csproj     # <Version> lives here (single source)
    ├── ClarionMarkdownEditor.addin      # SharpDevelop addin manifest (version stamped at build)
    ├── Directory.Build.props            # Clarion path config (ClarionBin variable)
    ├── Directory.Build.props.user.example # Template for your gitignored local Clarion path
    ├── Properties/
    │   └── AssemblyInfo.cs
    ├── MarkdownEditorViewContent.cs     # The editor's document window
    ├── MarkdownEditorControl.cs         # Main control hosting WebView2
    ├── MarkdownEditorControl.Designer.cs
    ├── MarkdownDisplayBinding.cs        # Opens .md / .markdown files in the editor
    ├── MarkdownEditorApi.cs             # Public OpenUrl entry point for other addins
    ├── ShowMarkdownEditorWindowCommand.cs # Tools → Markdown Editor (Ctrl+Shift+K)
    ├── OpenMarkdownFromUrlCommand.cs    # Tools → Open Markdown from URL...
    ├── UrlPromptDialog.cs
    ├── RegisterIconsCommand.cs          # Registers the menu icon at startup
    ├── Services/
    │   ├── AddinInfo.cs                 # Running version + install folder
    │   ├── EditorService.cs             # IDE editor interaction
    │   ├── MarkdownFetcher.cs           # Fetches Markdown from URLs
    │   ├── MarkdownUrlCache.cs          # Conditional-GET cache for fetched URLs
    │   ├── UrlNormalizer.cs             # GitHub URL → raw URL rewriting
    │   ├── TabFileWatcher.cs            # Auto-refresh on external file changes
    │   ├── SettingsService.cs           # User settings persistence
    │   └── ScriptBridge.cs              # Legacy WebBrowser bridge (unused since WebView2)
    └── Resources/
        ├── markdown-editor.html         # HTML structure (UI skeleton)
        ├── markdown-editor.css          # All editor styles (light/dark/layout)
        ├── markdown-editor.js           # All editor behaviour (tabs, preview, dirty tracking)
        ├── marked.min.js                # marked.js markdown parser (bundled, MIT)
        ├── highlight.min.js             # Highlight.js syntax highlighting library
        └── atom-one-dark.min.css        # Highlight.js theme

Technical Details

Architecture

  • UI Layer: HTML/CSS/JavaScript in WebView2 (Chromium-based)
  • Modern Browser Engine: WebView2 provides full modern web standards support
  • Native Menus: WinForms menu strip (File / View) above the WebView2 page
  • Markdown Parser: marked.js 11.2.0 — CommonMark + GFM (tables, task lists, strikethrough, autolinks)
  • Syntax Highlighting: Highlight.js 11.9.0 with custom Clarion language definition
  • IDE Integration: Uses reflection for compatibility across Clarion IDE versions

Why WebView2?

Migrated from old IE-based WebBrowser to WebView2 (Chromium) to enable:

  • Modern JavaScript support (ES6+)
  • Proper execution of minified libraries
  • Full CSS3 support including flexbox and grid
  • Better performance and security
  • Syntax highlighting with Highlight.js

Markdown Parsing

  • Library: marked.js 11.2.0 (MIT License)
  • Features: CommonMark-compliant, with GFM extensions enabled (gfm: true) for tables, task lists, strikethrough, and autolinks
  • Line breaks: breaks: false — a lone newline is treated as whitespace per CommonMark, not a <br>
  • Mermaid integration: a renderer override maps ```mermaid code fences to <div class="mermaid">…</div> so the existing mermaid rendering pass continues to work
  • Injection: C#-based file injection (no CDN dependency, works offline)
  • File: marked.min.js (~35 KB)

Syntax Highlighting Implementation

  • Library: Highlight.js 11.9.0 (BSD-3-Clause License)
  • Theme: Atom One Dark
  • Injection: C#-based file injection (no CDN dependencies, works offline)
  • Custom Language: Full Clarion language definition from discourse-highlightjs-clarion
  • Files: highlight.min.js (121KB) and atom-one-dark.min.css (856 bytes)
  • Auto-detection suppressed for no-language fences: only code blocks with an explicit language-… class get highlighted, so untagged fences render as plain monospace

Settings Storage

User settings are stored in:

%APPDATA%\ClarionMarkdownEditor\settings.txt

Cached URL bodies are stored alongside under cache\ as <hash>.body (content) and <hash>.meta (ETag, Last-Modified, stored timestamp) pairs. Safe to delete the whole cache\ folder at any time.

Public API for Other Addins

Other Clarion IDE addins can ask the Markdown Editor to open a URL without taking a hard reference on ClarionMarkdownEditor.dll — useful when the editor may or may not be installed on the user's machine:

var t = Type.GetType("ClarionMarkdownEditor.MarkdownEditorApi, ClarionMarkdownEditor");
t?.GetMethod("OpenUrl")?.Invoke(null, new object[] { url });

MarkdownEditorApi.OpenUrl(string url) ensures the editor window is visible, fetches the document (with cache + offline fallback), and opens it in a new read-only tab. Errors surface as in-editor message boxes — the call itself is fire-and-forget and never throws back to the caller.

If the editor isn't installed, Type.GetType returns null and the expression silently falls back. A typical caller will then offer to launch the URL in the system browser instead.

Development Notes

History

See CHANGELOG.md for the full release history.

Known Limitations

  • WebView2 Runtime Required: Users must have WebView2 Runtime installed (typically pre-installed on Windows 10/11)
  • 32-bit Only: Built for x86 to match Clarion IDE architecture
  • Print Feature: Print styles included but pagination needs work

Future Enhancements

  • Multi-page print support
  • Export to PDF
  • Markdown templates
  • Spell checking
  • Find/Replace in editor

Contributing

Contributions are welcome! Please feel free to submit issues or pull requests.

License

MIT License - see LICENSE file for details.

Authors

  • John Hickey - Original author
  • Mark Sarson - WebView2 enhancements, Mermaid support
  • Oleg Fomin - Document window mode feature
  • Claude Code - AI pair programming assistant

From an idea by Dinko Bakun

Acknowledgments

This project bundles or depends on the following open source libraries — many thanks to the authors and maintainers of each:

  • marked.js by Christopher Jeffrey and contributors (MIT License) — markdown → HTML parser
  • Highlight.js by Ivan Sagalaev and contributors (BSD-3-Clause License) — code syntax highlighting
  • Mermaid by Knut Sveidqvist and contributors (MIT License) — diagrams and flowcharts from text
  • WebView2 by Microsoft — embedded Chromium runtime
  • Custom Clarion syntax highlighting from discourse-highlightjs-clarion

Other inspirations and thanks:

  • Built for the Clarion IDE (SharpDevelop-based)
  • Inspired by popular markdown editors like Typora and Mark Text
  • ClarionLive — Clarion developer community

About

A Markdown file viewer and editor addin for the Clarion IDE with split-pane live preview

Resources

Readme
MIT license
Activity

Stars

3 stars

Watchers

3 watching

Forks

2 forks
Report repository

Releases

Packages

Contributors

Languages