-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
316 lines (275 loc) · 26.3 KB
/
index.html
File metadata and controls
316 lines (275 loc) · 26.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SquibView</title>
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='14' fill='%23f57c00' stroke='%23000' stroke-width='1'/><path d='M2 16h28M16 2a14 14 0 0114 14 14 14 0 01-14 14 14 14 0 01-14-14A14 14 0 0116 2zm0 0v28M9 16a7 7 0 0014 0 7 7 0 00-14 0z' fill='none' stroke='%23000' stroke-width='1'/></svg>">
<style>
/* Additional CSS */
/* SquibView CLI Generated Styles */
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
line-height: 1.6;
color: #333;
max-width: 900px;
margin: 0 auto;
padding: 2rem 3rem;
background-color: #fff;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.5em;
margin-bottom: 0.5em;
font-weight: 600;
line-height: 1.25;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.5rem;
}
h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.875rem; }
h6 { font-size: 0.85rem; color: #666; }
p { margin-bottom: 1rem; }
a {
color: #0066cc;
text-decoration: none;
}
a:hover {
color: #0066cc;
text-decoration: underline;
}
ul, ol {
margin-bottom: 1rem;
padding-left: 2rem;
}
li {
margin-bottom: 0.25rem;
}
blockquote {
margin: 1rem 0;
padding: 0.5rem 1rem;
border-left: 4px solid #ddd;
background-color: #f9f9f9;
color: #666;
}
code {
background-color: #f5f5f5;
padding: 0.2em 0.4em;
border-radius: 3px;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 0.85em;
}
pre {
background-color: #f8f8f8;
padding: 1rem;
margin-bottom: 1rem;
overflow-x: auto;
border-radius: 4px;
}
pre code {
background-color: transparent;
padding: 0;
border-radius: 0;
}
table {
border-collapse: collapse;
width: 100%;
margin-bottom: 1rem;
}
th, td {
border: 1px solid #ddd;
padding: 0.5rem;
text-align: left;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
img {
max-width: 100%;
height: auto;
margin-bottom: 1rem;
}
hr {
border: none;
border-top: 1px solid #ddd;
margin: 2rem 0;
}
/* Badge images - inline display */
p img {
display: inline;
margin: 0 2px;
vertical-align: middle;
}
/* Math styling */
.MathJax {
overflow-x: auto;
overflow-y: hidden;
}
/* Responsive design */
@media (max-width: 768px) {
body {
padding: 1rem 1.5rem;
}
table {
font-size: 0.875rem;
}
th, td {
padding: 0.25rem;
}
}
/* Print styles */
@media print {
body {
padding: 0;
color: #000;
}
a {
color: #000;
text-decoration: underline;
}
pre, blockquote {
page-break-inside: avoid;
}
h1, h2, h3, h4, h5, h6 {
page-break-after: avoid;
}
}
</style>
<!-- Highlight.js for syntax highlighting -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<!-- Leaflet for GeoJSON/TopoJSON maps -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/topojson-client@3.1.0/dist/topojson-client.min.js"></script>
<!-- Three.js for STL 3D models -->
<script src="https://unpkg.com/three@0.171.0/build/three.min.js"></script>
<!-- MathJax for math rendering -->
<script>
window.MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']],
displayMath: [['$$', '$$'], ['\\[', '\\]']],
processEscapes: true,
processEnvironments: true
},
options: {
ignoreHtmlClass: 'tex2jax_ignore',
processHtmlClass: 'tex2jax_process'
},
svg: {
fontCache: 'global'
}
};
</script>
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
</script>
<!-- Mermaid for diagram rendering -->
<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
</head>
<body>
<div><h1>SquibView</h1><p><a href="https://www.npmjs.com/package/squibview"><img src="https://img.shields.io/npm/v/squibview.svg" alt="NPM Version"></a><a href="LICENSE"><img src="https://img.shields.io/badge/License-BSD_2--Clause-orange.svg" alt="License"></a><a href="https://github.com/deftio/squibview/actions/workflows/ci.yml"><img src="https://img.shields.io/github/actions/workflow/status/deftio/squibview/ci.yml?branch=main&style=flat&logo=github&label=Build&color=blue" alt="Build Status"></a></p><p>Squibview is a markdown editor/viewer (pure js) with live preview, bidirectional editing, and rich content support (code highlighting, diagrams, math, maps, csv/psv/tsv, 3D and more). It can be used as markdown editor or viewer in many projects or to view AI/LLM outputs interactively. In headless mode squibview can be used as a lightweight viewer with the full support of markitdown and turndown libaries.</p><p>For a lightweight pure js bidirectional parser/editor consider it’s sister project <a href="https://github.com/deftio/quikdown">quikdown</a> which has no dependancies and starts at 9-15KB with some limits on less used commond mark features.</p><p><strong>GitHub:</strong><a href="https://deftio.github.io/squibview/examples/example_ESM.html"><strong>Live Demo</strong></a> | <a href="https://deftio.github.io/squibview/examples/"><strong>Examples</strong></a> | <a href="https://deftio.github.io/squibview/docs/home.html"><strong>Documentation</strong></a> | <a href="https://deftio.github.io/squibview/docs/programmers-guide.html"><strong>API Reference</strong></a><br><strong>Local:</strong><a href="./examples/example_ESM.html"><strong>Live Demo</strong></a> | <a href="./examples/"><strong>Examples</strong></a> | <a href="./docs/"><strong>Documentation</strong></a> | <a href="./src/"><strong>Source</strong></a></p><img src="./squibview-demo.gif" alt="SquibView Live Demo - Progressive markdown rendering showing headings, bullets, tables, diagrams, math, and maps" width="100%"><h2>What It Does</h2><p>SquibView renders Markdown (or HTML) with live preview and allows editing in both source and rendered views. Changes sync automatically between views.</p><p><strong>Key Capabilities:</strong></p><ul><li>Edit markdown and see live HTML preview</li><li>Edit in the rendered view - changes reflect back to markdown</li><li>Full revision history with undo/redo</li><li>Visual diff comparison between any revisions</li><li>Export/copy as HTML with embedded images (including diagrams, pics, maps, 3D, editable tables and source code)</li><li>Works as CLI tool or JavaScript component</li><li>Streaming support for use with LLMs</li><li>Examples with Vue and React in addition to pure js</li></ul><p><strong>Recent Improvements (v1.0.21 - September 2025):</strong></p><ul><li>✨ Enhanced typography with proper paragraph and heading spacing</li><li>🔧 Fixed Smart Linefeeds toggle for visual line break control</li><li>📝 Dual linefeed handling: source modification or view-only rendering</li><li>🎨 Professional text presentation with smart margin adjustments</li></ul><p><strong>Supported Content:</strong></p><ul><li>📊 Mermaid diagrams, flowcharts, sequence diagrams</li><li>🗺️ GeoJSON/TopoJSON interactive maps</li><li>🧮 LaTeX math equations</li><li>📐 STL 3D models</li><li>📈 CSV/TSV tables</li><li>🎨 SVG graphics</li><li>🖼️ Images with base64 conversion</li><li>💻 Syntax-highlighted code</li></ul><h2>Quick Start</h2><h3>Browser - Zero Configuration Quick Start</h3><p>The easiest way to get started - with fence libraries (math, mermaid, etc) loading automatically from CDN when your content needs them. Note that special care is taken to not load dependancies that may have already been provisioned so there is no double-loading.</p><div data-source-type="html"><pre><code class="hljs language-html" data-source-type="code" data-lang="html"><span class="hljs-comment"><!-- SquibView CSS --></span><span class="hljs-tag"><<span class="hljs-name">link</span><span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span><span class="hljs-attr">href</span>=<span class="hljs-string">"https://unpkg.com/squibview/dist/squibview.min.css"</span>></span><span class="hljs-tag"><<span class="hljs-name">script</span><span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="language-javascript"><span class="hljs-keyword">import</span><span class="hljs-title class_">SquibView</span><span class="hljs-keyword">from</span><span class="hljs-string">'https://unpkg.com/squibview/dist/squibview.esm.min.js'</span>;
<span class="hljs-keyword">const</span> editor = <span class="hljs-keyword">new</span><span class="hljs-title class_">SquibView</span>(<span class="hljs-string">'#editor'</span>, {
<span class="hljs-attr">initialContent</span>: <span class="hljs-string">'# Hello\nStart typing **markdown**...\n\n```mermaid\ngraph TD\n A --> B\n```'</span>,
<span class="hljs-attr">autoload_deps</span>: { <span class="hljs-attr">all</span>: <span class="hljs-literal">true</span> } <span class="hljs-comment">// Enable autoloading of fence libraries (mermaid, math etc)</span>
});
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span><span class="hljs-tag"><<span class="hljs-name">div</span><span class="hljs-attr">id</span>=<span class="hljs-string">"editor"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre></div><p>With the autoload_deps config Mermaid, syntax highlighting, math rendering, and maps load automatically when you use them. If you need more finegrain control our are using other libraries for rendering math/diagrams/etc leave autoload_deps off (default) and load your own libraries. See examples for more.</p><p>For those running in air_gapped or offline environments use the standalone builds (see docs) which have all major fences (mermaid, mathjax, threejs, etc) bundled in (note these buidls are 3.6MB).</p><h3>NPM Install</h3><div data-source-type="bash"><pre><code class="hljs language-bash" data-source-type="code" data-lang="bash">npm install squibview
</code></pre></div><div data-source-type="javascript"><pre><code class="hljs language-javascript" data-source-type="code" data-lang="javascript"><span class="hljs-keyword">import</span><span class="hljs-title class_">SquibView</span><span class="hljs-keyword">from</span><span class="hljs-string">'squibview'</span>;
<span class="hljs-comment">// With autoload (recommended)</span><span class="hljs-keyword">const</span> editor = <span class="hljs-keyword">new</span><span class="hljs-title class_">SquibView</span>(<span class="hljs-string">'#editor'</span>, {
<span class="hljs-attr">autoload_deps</span>: { <span class="hljs-attr">all</span>: <span class="hljs-literal">true</span> }
});
<span class="hljs-comment">// Or manually manage dependencies</span><span class="hljs-keyword">const</span> editor = <span class="hljs-keyword">new</span><span class="hljs-title class_">SquibView</span>(<span class="hljs-string">'#editor'</span>, {
<span class="hljs-attr">autoload_deps</span>: <span class="hljs-literal">null</span><span class="hljs-comment">// Load dependencies yourself</span>
});
</code></pre></div><h3>CLI Tool</h3><p>SquibView includes a command line tool (<code>squibv</code>) for converting markdown/HTML files to standalone HTML pages.</p><div data-source-type="bash"><pre><code class="hljs language-bash" data-source-type="code" data-lang="bash"><span class="hljs-comment"># Convert markdown to HTML page</span>
npx squibv document.md
<span class="hljs-comment"># Watch mode - rebuilds on file changes</span>
npx squibv document.md --watch
<span class="hljs-comment"># Bundle for offline use (embeds all assets)</span>
npx squibv document.md --bundle-offline
</code></pre></div><h2>Core Features</h2><h3>View Modes</h3><div data-source-type="javascript"><pre><code class="hljs language-javascript" data-source-type="code" data-lang="javascript">editor.<span class="hljs-title function_">setView</span>(<span class="hljs-string">'split'</span>); <span class="hljs-comment">// Side-by-side editing (default)</span>
editor.<span class="hljs-title function_">setView</span>(<span class="hljs-string">'src'</span>); <span class="hljs-comment">// Source only</span>
editor.<span class="hljs-title function_">setView</span>(<span class="hljs-string">'html'</span>); <span class="hljs-comment">// Rendered only</span></code></pre></div><h3>Working with Content</h3><div data-source-type="javascript"><pre><code class="hljs language-javascript" data-source-type="code" data-lang="javascript"><span class="hljs-comment">// Set markdown content</span>
editor.<span class="hljs-title function_">setContent</span>(<span class="hljs-string">'# My Document\n\nEdit this text...'</span>, <span class="hljs-string">'md'</span>);
<span class="hljs-comment">// Get current content</span><span class="hljs-keyword">const</span> markdown = editor.<span class="hljs-title function_">getContent</span>();
<span class="hljs-keyword">const</span> html = editor.<span class="hljs-title function_">getRenderedHTML</span>();
</code></pre></div><h3>Revision History & Diffs</h3><div data-source-type="javascript"><pre><code class="hljs language-javascript" data-source-type="code" data-lang="javascript">editor.<span class="hljs-title function_">revisionUndo</span>();
editor.<span class="hljs-title function_">revisionRedo</span>();
<span class="hljs-comment">// Compare revisions (v1.0.13+)</span><span class="hljs-keyword">const</span> diffHTML = editor.<span class="hljs-title function_">getSourceDiffHTML</span>({ <span class="hljs-attr">fromIndex</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">toIndex</span>: <span class="hljs-number">2</span> });
<span class="hljs-keyword">const</span> inlineDiff = editor.<span class="hljs-title function_">getSourceDiffInline</span>(); <span class="hljs-comment">// Blue additions, red deletions</span></code></pre></div><h3>Export & Copy</h3><div data-source-type="javascript"><pre><code class="hljs language-javascript" data-source-type="code" data-lang="javascript">editor.<span class="hljs-title function_">copySource</span>(); <span class="hljs-comment">// Copy markdown to clipboard</span>
editor.<span class="hljs-title function_">copyHTML</span>(); <span class="hljs-comment">// Copy rendered HTML</span>
editor.<span class="hljs-title function_">exportHTML</span>(); <span class="hljs-comment">// Download as file</span></code></pre></div><h3>Smart Linefeeds & Text Formatting</h3><div data-source-type="javascript"><pre><code class="hljs language-javascript" data-source-type="code" data-lang="javascript"><span class="hljs-comment">// Fix linefeeds in markdown source (adds two spaces for hard breaks)</span><span class="hljs-keyword">const</span> fixedMarkdown = editor.<span class="hljs-title function_">fixLinefeedsInMarkdown</span>(text);
<span class="hljs-comment">// Toggle visual line breaks (view-only, doesn't modify source)</span>
editor.<span class="hljs-title function_">toggleLinefeedView</span>();
<span class="hljs-comment">// Other formatting utilities</span>
editor.<span class="hljs-title function_">increaseHeadings</span>(); <span class="hljs-comment">// Increase heading levels (H1→H2, etc.)</span>
editor.<span class="hljs-title function_">decreaseHeadings</span>(); <span class="hljs-comment">// Decrease heading levels (H2→H1, etc.)</span>
editor.<span class="hljs-title function_">removeHR</span>(); <span class="hljs-comment">// Remove horizontal rules</span></code></pre></div><h2>Examples</h2><p><strong>Live Examples</strong> (GitHub Pages)</p><ul><li><a href="https://deftio.github.io/squibview/examples/example_autoload_simple.html">Basic Usage</a> - Simple editor setup</li><li><a href="https://deftio.github.io/squibview/examples/example_headless.html">Headless Mode</a> - Custom UI with full API</li><li><a href="https://deftio.github.io/squibview/examples/diff_view_inline.html">Diff Viewer</a> - Compare revisions</li><li><a href="https://deftio.github.io/squibview/examples/diff_view_live.html">Live Diff</a> - Track changes in real-time</li><li><a href="https://deftio.github.io/squibview/examples/example_react.html">React Integration</a> - Use with React</li></ul><p><strong>Local Examples</strong> (after cloning repo)</p><ul><li><a href="./examples/example_autoload_simple.html">Basic Usage</a></li><li><a href="./examples/example_headless.html">Headless Mode</a></li><li><a href="./examples/diff_view_inline.html">Diff Viewer</a></li><li><a href="./examples/diff_view_live.html">Live Diff</a></li><li><a href="./examples/index.html">All Examples</a></li></ul><h2>Documentation</h2><p><strong>Complete Documentation</strong></p><ul><li><a href="docs/">📚 Full Documentation</a> - All documentation in organized structure</li><li><a href="docs/api/">API Reference</a> - Comprehensive API documentation</li><li><a href="docs/programmers-guide.html">Programmer’s Guide</a> - Detailed usage guide</li><li><a href="docs/guides/headless-mode.html">Headless Mode Guide</a> - Using SquibView without built-in UI</li><li><a href="docs/cli/CLI.html">CLI Documentation</a> - Command line interface guide</li><li><a href="examples/">Examples</a> - Live examples and demos</li><li><a href="docs/release-notes.html">Release Notes</a> - Version history and changelog</li></ul><p><strong>Local Documentation</strong> (after cloning)</p><ul><li><a href="./docs/home.html">Documentation Home</a></li><li><a href="./docs/programmers-guide.html">API Reference</a></li><li><a href="./docs/release-notes.html">Release Notes</a></li></ul><h2>Build Options</h2><p><strong>All builds include integrated autoload capability (v1.0.18+). Each configuration is available in both ESM (for modern bundlers) and UMD (for script tags) formats:</strong></p><table><thead><tr><th>Configuration</th><th>What It Does</th><th>Best For</th><th>Size (minified)</th><th>What’s Included</th></tr></thead><tbody><tr><td><strong>Standard</strong> 🚀</td><td>Recommended - includes autoload</td><td>Most projects</td><td>254KB</td><td>Core editor with autoload capability for all features</td></tr><tr><td><strong>Lean</strong></td><td>Minimal - you add libraries</td><td>Custom bundlers</td><td>135KB</td><td>Editor only - bring your own libraries</td></tr><tr><td><strong>Standalone</strong></td><td>Everything pre-bundled</td><td>Offline use</td><td>3.5MB</td><td>Everything included - no external dependencies</td></tr></tbody></table><h3>Quick Selection Guide</h3><ul><li><strong>Want it to just work?</strong> → Use <strong>Standard</strong> with <code>autoload_deps: { all: true }</code> - Features load automatically</li><li><strong>Custom build setup?</strong> → Use <strong>Lean</strong> (<code>squibview.esm-lean.min.js</code>) - You control all dependencies</li><li><strong>Offline/airgapped?</strong> → Use <strong>Standalone</strong> (<code>squibview.standalone.esm.min.js</code>) - Everything included (3.6MB)</li></ul><h3>Complete File List</h3><table><thead><tr><th>File</th><th>Module Format</th><th>Configuration</th><th>Size (minified)</th></tr></thead><tbody><tr><td><code>squibview.esm.min.js</code></td><td>ESM</td><td>Standard</td><td>254KB</td></tr><tr><td><code>squibview.umd.min.js</code></td><td>UMD</td><td>Standard</td><td>255KB</td></tr><tr><td><code>squibview.esm-lean.min.js</code></td><td>ESM</td><td>Lean</td><td>135KB</td></tr><tr><td><code>squibview.umd-lean.min.js</code></td><td>UMD</td><td>Lean</td><td>137KB</td></tr><tr><td><code>squibview.standalone.esm.min.js</code></td><td>ESM</td><td>Standalone</td><td>3.5MB</td></tr><tr><td><code>squibview.standalone.umd.min.js</code></td><td>UMD</td><td>Standalone</td><td>3.7MB</td></tr><tr><td><code>squibview.min.css</code></td><td>-</td><td>Required for all</td><td>23KB</td></tr></tbody></table><blockquote><p><strong>v1.0.15+</strong>: Default builds now include markdown-it, diff-match-patch, and tiny-emitter bundled. Use <code>-lean</code> builds if you need the old behavior.</p></blockquote><h3>Autoload Configuration (v1.0.18+)</h3><p>All SquibView builds now include autoload capability. Enable it with the <code>autoload_deps</code> option:</p><div data-source-type="javascript"><pre><code class="hljs language-javascript" data-source-type="code" data-lang="javascript"><span class="hljs-comment">// Enable autoloading for all libraries</span><span class="hljs-keyword">const</span> editor = <span class="hljs-keyword">new</span><span class="hljs-title class_">SquibView</span>(<span class="hljs-string">'#editor'</span>, {
<span class="hljs-attr">autoload_deps</span>: { <span class="hljs-attr">all</span>: <span class="hljs-literal">true</span> }
});
<span class="hljs-comment">// Fine-grained control</span><span class="hljs-keyword">const</span> editor = <span class="hljs-keyword">new</span><span class="hljs-title class_">SquibView</span>(<span class="hljs-string">'#editor'</span>, {
<span class="hljs-attr">autoload_deps</span>: {
<span class="hljs-attr">mermaid</span>: <span class="hljs-string">'ondemand'</span>, <span class="hljs-comment">// Load when mermaid blocks detected</span><span class="hljs-attr">hljs</span>: <span class="hljs-string">'auto'</span>, <span class="hljs-comment">// Load immediately on init</span><span class="hljs-attr">mathjax</span>: <span class="hljs-literal">false</span>, <span class="hljs-comment">// Never load (disable)</span><span class="hljs-attr">leaflet</span>: <span class="hljs-string">'ondemand'</span>, <span class="hljs-comment">// Load when map blocks detected</span><span class="hljs-attr">three</span>: <span class="hljs-string">'ondemand'</span><span class="hljs-comment">// Load when STL blocks detected</span>
}
});
</code></pre></div><h4>What Gets Auto-Loaded When Needed:</h4><table><thead><tr><th>When you type…</th><th>What loads</th><th>For</th></tr></thead><tbody><tr><td><code>```mermaid</code></td><td>Mermaid (377KB)</td><td>Diagrams, flowcharts, graphs</td></tr><tr><td><code>```javascript</code></td><td>Highlight.js (45KB)</td><td>Syntax highlighting for code</td></tr><tr><td><code>$$x^2$$</code> or <code>```math</code></td><td>MathJax (1.3MB)</td><td>Mathematical equations</td></tr><tr><td><code>```geojson</code></td><td>Leaflet (142KB)</td><td>Interactive maps</td></tr><tr><td><code>```stl3d</code></td><td>Three.js (1.1MB)</td><td>3D model viewing</td></tr></tbody></table><h4>Advanced Configuration</h4><p>Control loading behavior per library:</p><div data-source-type="javascript"><pre><code class="hljs language-javascript" data-source-type="code" data-lang="javascript"><span class="hljs-keyword">const</span> editor = <span class="hljs-keyword">new</span><span class="hljs-title class_">SquibView</span>(<span class="hljs-string">'#editor'</span>, {
<span class="hljs-attr">autoload_deps</span>: {
<span class="hljs-comment">// Loading strategies: 'auto' | 'ondemand' | false | function</span><span class="hljs-attr">mermaid</span>: <span class="hljs-string">'auto'</span>, <span class="hljs-comment">// Load immediately on init</span><span class="hljs-attr">hljs</span>: <span class="hljs-string">'ondemand'</span>, <span class="hljs-comment">// Load when code blocks are detected (default)</span><span class="hljs-attr">mathjax</span>: <span class="hljs-literal">false</span>, <span class="hljs-comment">// Never load</span><span class="hljs-attr">leaflet</span>: <span class="hljs-string">'ondemand'</span>, <span class="hljs-comment">// Load when map blocks detected</span><span class="hljs-attr">three</span>: myCustomLoader, <span class="hljs-comment">// Use custom loading function</span><span class="hljs-comment">// Use custom CDN</span><span class="hljs-attr">cdnUrls</span>: {
<span class="hljs-attr">mermaid</span>: {
<span class="hljs-attr">script</span>: <span class="hljs-string">'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js'</span>
}
},
<span class="hljs-comment">// Enable debug logging (silent by default)</span><span class="hljs-attr">debug</span>: <span class="hljs-literal">true</span><span class="hljs-comment">// Shows library loading in console</span>
}
});
</code></pre></div><h3>Standalone Build - Best for Offline/Secure Environments</h3><p>The standalone build (<code>squibview.standalone.*.js</code>) bundles everything:</p><ul><li><strong>Largest size</strong> - ~3.7MB includes all libraries</li><li><strong>Works offline</strong> - No external dependencies</li><li><strong>Corporate friendly</strong> - No CDN calls, perfect for secure environments</li><li><strong>Everything included</strong> - All features work immediately</li></ul><h2>License</h2><p>BSD-2-Clause. See <a href="LICENSE">LICENSE</a>.</p></div>
<script>
// Initialize MathJax after page load
document.addEventListener('DOMContentLoaded', function() {
if (window.MathJax && window.MathJax.typesetPromise) {
window.MathJax.typesetPromise().catch(function(err) {
console.warn('MathJax typesetting failed:', err);
});
}
});
</script>
<script>
// Initialize Mermaid after page load
document.addEventListener('DOMContentLoaded', function() {
if (window.mermaid) {
try {
window.mermaid.initialize({
startOnLoad: false,
theme: 'default',
securityLevel: 'loose',
fontFamily: 'inherit'
});
// Manually render all mermaid diagrams
const mermaidElements = document.querySelectorAll('.mermaid');
mermaidElements.forEach(function(element, index) {
const id = 'mermaid-' + index;
element.id = id;
try {
window.mermaid.render(id + '-svg', element.textContent, function(svgCode) {
element.innerHTML = svgCode;
});
} catch (err) {
console.warn('Mermaid rendering failed for element', index, ':', err);
// Fallback: show the text content
element.innerHTML = '<pre>' + element.textContent + '</pre>';
}
});
} catch (err) {
console.warn('Mermaid initialization failed:', err);
}
}
});
</script>
</body>
</html>