secutils-dev/secutils/tools

Markdown Preview (Secutils.dev)

A reading-first, in-browser Markdown reader. The rendered preview is the default central view; source editing and self-contained HTML/PDF export are available on demand.

What it renders

• GitHub-Flavored Markdown - tables, task lists, strikethrough,

autolinks.

• Syntax highlighting - fenced code blocks via highlight.js, with a

language label and copy button in exports.

• Mermaid diagrams - fenced ``` `mermaid ``` blocks render to inline

SVG. The preview supports zoom, drag-to-pan, and Fit, including in fullscreen. Ctrl/⌘ + scroll and trackpad pinch zoom at the pointer. Touch swipes pan with native scrolling. The focused diagram supports arrow keys for pan, + and - for zoom, and 0 for fit. The percentage button shows actual size. HTML and PDF exports retain the complete static SVG. View changes do not alter the Markdown or shared links. Unchanged diagrams retain zoom, pan, and Fit mode after unrelated block or Source edits. Changed diagrams start in Fit mode. Opening a document or reloading the page starts fresh views.

• GeoJSON and TopoJSON maps - fenced geojson and topojson blocks display

interactive longitude/latitude maps. Drag to pan, use arrow keys, or use the zoom and reset buttons. Feature properties appear in hover tooltips. Maps use an OpenStreetMap basemap with a Web Mercator projection.

• ASCII STL models - fenced stl blocks display interactive 3D models.

Drag or use arrow keys to rotate. Controls provide zoom, reset, Solid, Wireframe, and Surface angle modes. Binary STL is not supported in Markdown fences. Solid and Surface angle modes hide facet edges. Overlay controls include rotation, zoom, reset, and fullscreen. Pan controls sit beside zoom. Shift-drag or Shift + arrow keys also pan the model without rotation.

• Copy source - each map and STL viewer has an overlay button that copies the original fenced source.
• Maps and models retain their SVG or WebGL view and controls in exported HTML without external runtime dependencies.

PDF exports use the saved static view. Invalid blocks display an error and preserve their source.

• Map basemap tiles require a network connection. Geometry remains visible and interactive without tiles.

Tile requests go directly from the browser to OpenStreetMap and reveal the displayed geographic area.

• KaTeX math - inline $E = mc^2$ and display $$ … $$ / \[ … \].

KaTeX is lazy-loaded from a CDN the first time math is detected.

• GitHub alerts - [!NOTE], [!TIP], [!IMPORTANT], [!WARNING],

[!CAUTION] blockquotes become titled callout boxes.

• `==highlight==` - rendered as <mark>.
• Heading anchors - h1–h6 get slug ids and a hover anchor link

(click copies a deep link).

• Wide tables - tables with ≥ 4 columns get a horizontal-scroll wrapper.

YAML frontmatter (title: …) is honoured: the title becomes the document name used for the page title and downloaded filenames. Click the name in the toolbar to rename the document. The URL fragment records the new name.

How to use it

• View switch - a segmented control toggles between three views:

Preview (rendered, default), HTML (the exact self-contained export rendered in a sandboxed iframe), and Source (the editor). The active segment is highlighted; Esc returns to Preview.

• Read - the rendered preview fills the page. Use Find (the search

icon, or Ctrl/Cmd+F) to search within the document; Enter / Shift+Enter cycle matches.

• Links in Preview - Markdown links, autolinks, and embedded HTML links open in a new tab.

Fragment links still scroll within the document. Source text and exported links stay unchanged.

• Edit - edit blocks directly in the preview (see "Editing in the

preview"), or click Source (or Ctrl/Cmd+E) to swap to a CodeMirror pane; edits update the preview live. Esc returns to the preview. Ctrl/Cmd+S saves in either view (see "Saving").

• Open - the Open button (or Ctrl/Cmd+O), drag-and-drop a file

onto the page, or just paste (Ctrl/Cmd+V) into the empty preview. Open or drop an ASCII or binary .stl file to create a Markdown stl fence. Binary STL converts to ASCII STL in the browser. Source editing, sharing, and exports use this converted Markdown. Binary color attributes are not retained. Large models can exceed the share URL limit. Models with more than 2,000 triangles use WebGL instead of individual SVG triangles. Large sources use a plain-text editor to avoid syntax-parser delays. HTML exports retain GPU controls and a static print image.

• 3MF import - Open or drop a .3mf file. A cancellable worker extracts and processes the package locally.

Core meshes, nested components, repeated instances, build transforms, and declared units are supported. Core base-material colors and Materials color groups preserve object defaults and triangle overrides. Per-vertex color groups interpolate in sRGB. Standalone surface colors are opaque. All 3MF models use WebGL, including small models. Optional textures, advanced materials, and slicer-specific paint metadata use the default blue material. ZIP and ZIP64 packages are supported within the same size limits. Unsupported required extensions, cross-part components, and external relationships produce an error. Archive and expanded content are limited to 128 MiB. Rendered geometry is limited to 1,000,000 triangles. Worker processing stops after 30 seconds. Opening another file or editing the source cancels an earlier import. The Cancel import button preserves the current document.

• 3MF source - Imports create a tool-specific su-mesh fence, not an STL fence or a GitHub-compatible model block.

The JSON body has version: 1, base64 Float32 positions and colors, count, bounds, units, instance identities, and warnings. Positions contain three separate XYZ vertices per triangle. Colors contain matching sRGB triplets. Positions use millimeters in Y-up viewer coordinates. Instance metadata retains the original transform chains. The original archive is discarded. Source editing, Markdown downloads, sharing, and Copy source use this representation. Copy source copies the JSON fence body. HTML exports preserve interactive colors offline. PDF/print uses a static color image. Large models remain available through HTML export even when a share URL is too long.

• Share - a menu with two link types:
• Copy full link copies a tools.secutils.dev/md#<encoded> URL with the whole

Markdown in the fragment. It never expires, but long documents make long URLs.

• Copy short link copies tools.secutils.dev/md#s=<16 chars>. The browser encrypts

the document, and Secutils.dev stores only the ciphertext, for 1, 7 (default), or 14 days. The toast shows the exact expiry. A short link is a snapshot: later edits need a new link. Copying again for an unchanged document reuses the same link. The stored copy is limited to 1 MiB after compression, about 3 MB of prose.

• Delete short link appears when this browser created a live short link for the

current document. Only that browser holds the delete token.

• Export - Download HTML (single self-contained file), **Download

PDF (`Ctrl/Cmd+P`, paginated via Paged.js), or Copy HTML**.

• Options (gear) - set the reading width for Preview and exported HTML:

Comfortable (800px, default), Wide (1100px), Full width, or a custom 320–2400px width. The same panel controls exported HTML features: table of contents, PDF export button, in-page find, and embedded Markdown source. The selected reading width persists across reloads and new tabs in this browser.

• Reading settings in exported HTML - readers can change the width or

restore the document default from the toolbar. Their choice lasts for the current page visit; reloading restores the width selected at export time.

Editing in the preview

The rendered preview is editable one block at a time, as in Notion. Every edit replaces only that block's source text, so the rest of the file stays byte-identical.

• Task checkboxes - click to toggle [ ] and [x] in the source.
• Block handle - hover a block or list item to show + and a grip in the left margin.

The controls have a reserved gutter at every reading width. Left-side block whitespace also activates them. Between-item gaps keep the adjacent item's controls active, including in nested lists.

• + adds a block below. On a list item, it adds a sibling item with the same marker.
• Click the grip to open the actions: Edit, Mark done, Copy text, Move up,

Move down, and Delete.

• Drag the grip to move the block. A line shows where it lands. List items move within

their list. Headings move their whole section past sections of the same level. Multiline items remain movable. Holding the pointer near an edge scrolls the preview. Ordered-list moves renumber the source from its original starting number and preserve the marker style. Continuation indentation adjusts when a number gains or loses a digit. Nested text and code remain unchanged.

• Format selected text - select words in one block to show a toolbar: Bold, Italic,

Strikethrough, Highlight (==text==), and Inline code. Applying a format to text that already has it removes the format from the selection. A selection that partly covers text with the same format gets one combined run. Ctrl/Cmd+B and Ctrl/Cmd+I also work. Selections across wrapped lines in one list paragraph preserve source indentation. All five styles work in GitHub alert bodies, including nested blockquotes, and preserve alert directives and quote prefixes. Generated alert titles offer Comment only.

• Edit a block - double-click it, or use Edit. The block becomes a small Markdown

editor. Esc, Ctrl/Cmd+Enter, or clicking elsewhere commits it and renders it again. An unchanged or empty result changes nothing.

• Add at the end - click the empty space below the last block.
• Headings act on sections - a section runs to the next heading of the same or a higher level.
• Mark done wraps the heading text in ~~...~~ and collapses the section.

Click a done heading to expand or collapse it. Mark not done removes the strikethrough.

• Delete section and Move section up/down act on the whole section.
• Copy text - copies the rendered text of a block, for example a reply to paste elsewhere.
• Undo - Ctrl/Cmd+Z and Ctrl/Cmd+Shift+Z in the preview undo and redo block edits.

A deleted block also shows an Undo button.

• Move with the keyboard - Alt+Up and Alt+Down move the block under the pointer.
• Progress - when the document has task items or a done section, the toolbar shows

N of M left. This counts task items plus the top-level sections (the shallowest heading below h1).

• Hide done items (Options) - hides checked tasks and done sections.

Block editing is not available for documents over 10 MB. Those documents still render, and the Source view still edits them.

Review comments