### Build and install Vivify Source: https://github.com/jannis-baum/vivify/blob/main/docs/CONTRIBUTING.md Compiles and installs the application to the configured location. ```sh make install ``` -------------------------------- ### Configure installation path Source: https://github.com/jannis-baum/vivify/blob/main/docs/CONTRIBUTING.md Sets the installation directory for Vivify. ```sh ./configure ~/.local/bin ``` -------------------------------- ### Verify project installation and quality Source: https://github.com/jannis-baum/vivify/blob/main/docs/upgrading-dependencies.md Commands to ensure the project installs correctly and passes linting and development checks. ```bash make install ``` ```bash yarn lint ``` ```bash yarn dev ``` -------------------------------- ### Vivify Configuration File Example Source: https://context7.com/jannis-baum/vivify/llms.txt Example JSON configuration file for Vivify. Specifies paths for custom CSS and scripts, ignore patterns, timeouts, page titles, Markdown extensions, and rendering options. ```json { "styles": "~/.config/vivify/custom.css", "scripts": ["~/.config/vivify/scripts/*.js"], "dirListIgnore": "~/.config/vivify/ignore", "timeout": 10000, "pageTitle": "components.slice(-2).join('/')", "mdExtensions": ["markdown", "md", "mdown", "mdwn", "mkd", "mkdn"], "mdFilePatterns": ["^.*/calcurse-note[a-zA-Z0-9]{6}$"], "preferHomeTilde": true, "renderHTML": false, "katexOptions": { "errorColor": "#cc0000", "macros": { "\\RR": "\\mathbb{R}" } }, "tocOptions": { "includeLevel": [2, 3] }, "alertOptions": { "icons": { "todo": "check-circle", "question": "question" }, "titles": { "note": "Note" }, "fallbackIcon": "alert" }, "browserOptions": { "name": "firefox", "arguments": ["--private-window"] } } ``` -------------------------------- ### Start development server Source: https://github.com/jannis-baum/vivify/blob/main/docs/CONTRIBUTING.md Launches the Vivify server in development mode on port 3000 with auto-reload enabled. ```sh yarn dev ``` -------------------------------- ### Install project dependencies Source: https://github.com/jannis-baum/vivify/blob/main/docs/CONTRIBUTING.md Run this command after cloning the repository to download required Node.js dependencies. ```sh yarn ``` -------------------------------- ### Show viv CLI Version Source: https://context7.com/jannis-baum/vivify/llms.txt Display the installed version of the `viv` command-line tool. ```bash # Show version viv --version ``` -------------------------------- ### View Markdown File with viv CLI Source: https://context7.com/jannis-baum/vivify/llms.txt Use the `viv` command to open a Markdown file in the browser. The server starts automatically if not running. ```bash # View a Markdown file viv ~/documents/notes.md ``` -------------------------------- ### Configure KaTeX Options Source: https://github.com/jannis-baum/vivify/blob/main/docs/customization.md Customize KaTeX rendering by providing an object with available KaTeX options in your Vivify configuration file. This example shows how to set error color and define custom macros. ```json "katexOptions": { "errorColor": "#cc0000", "macros": { "\\RR": "\\mathbb{R}" } } ``` -------------------------------- ### Configure Browser Options Source: https://github.com/jannis-baum/vivify/blob/main/docs/customization.md Specify which browser Vivify should use to open files, including custom arguments. This example shows how to open files in Firefox or in incognito mode with Chromium. ```json "browserOptions": { "name": "firefox" } ``` ```json "browserOptions": { "name": "chromium", "arguments": ["--incognito"] } ``` -------------------------------- ### View Directory Listing via Viewer API Source: https://context7.com/jannis-baum/vivify/llms.txt Request a directory path via the `/viewer/{path}` endpoint to get an HTML listing of its contents. ```bash # View a directory listing curl -H "Accept: text/html" "http://localhost:31622/viewer/~/projects" ``` -------------------------------- ### Configure Table of Contents Options Source: https://github.com/jannis-baum/vivify/blob/main/docs/customization.md Customize the table of contents generation for Markdown files by specifying options in your Vivify configuration. This example includes levels 2 and 3. ```json "tocOptions": { "includeLevel": [2, 3] } ``` -------------------------------- ### Extended Markdown Features Example Source: https://context7.com/jannis-baum/vivify/llms.txt Demonstrates various extended Markdown features supported by Vivify, including KaTeX math, Mermaid diagrams, Graphviz, GitHub-style alerts, task lists, tables of contents, wiki links, footnotes, and custom attributes. ```markdown # Markdown Example ## Math with KaTeX Inline math: $E = mc^2$ Block math: $$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$ ## Mermaid Diagrams ```mermaid flowchart LR A[Start] --> B{Decision} B -->|Yes| C[Action 1] B -->|No| D[Action 2] ``` ## Graphviz/DOT ```graphviz digraph G { rankdir=LR A -> B -> C } ``` ## GitHub-style Alerts > [!NOTE] > Useful information > [!WARNING] > Important warning > [!TIP] Custom Title > A helpful tip ## Task Lists - [x] Completed task - [ ] Pending task ## Table of Contents [[toc]] ## Wiki Links Link to [[other-file]] or [[path/to/file.md]] ## Footnotes Here's a statement[^1] with a footnote. [^1]: This is the footnote content. ## Custom Attributes This paragraph has custom styling.{style="color:red"} ``` -------------------------------- ### Log Message in Alert Source: https://github.com/jannis-baum/vivify/blob/main/tests/rendering/markdown-additional.md A simple TypeScript console log example nested within an alert block. ```ts console.log('hey') ``` -------------------------------- ### YAML Front Matter Parsing Source: https://context7.com/jannis-baum/vivify/llms.txt Example of YAML front matter in a Markdown file. The front matter is parsed and made available as JSON to custom scripts, accessible via a script tag. ```markdown --- title: My Document author: John Doe tags: - documentation - tutorial --- # Document Content ``` -------------------------------- ### Check Client Health for Specific File Source: https://context7.com/jannis-baum/vivify/llms.txt Send a GET request to `/health/{path}` to verify if any clients are currently viewing the specified file. A 200 OK response means clients are connected; a 404 indicates none are. ```bash # Check if clients are viewing a specific file curl "http://localhost:31622/health/home/user/notes.md" # Response: 200 OK if clients connected, 404 if no clients ``` -------------------------------- ### Automatic URL linking in backticks Source: https://github.com/jannis-baum/vivify/blob/main/tests/rendering/markdown-extended.md Examples of URLs and emails inside backticks which should not be rendered as links. ```text `https://www.markdownguide.org` `fake@example.com` ``` -------------------------------- ### Check Server Health Source: https://context7.com/jannis-baum/vivify/llms.txt Send a GET request to the `/health` endpoint to check if the Vivify server is running. An empty body with a 200 OK response indicates the server is active. ```bash # Check if server is running curl "http://localhost:31622/health" # Response: 200 OK (empty body) ``` -------------------------------- ### Viewer API - GET /viewer/{path} Source: https://context7.com/jannis-baum/vivify/llms.txt Renders files and directories as HTML pages. Supports Markdown, Jupyter notebooks, images, and plain text with syntax highlighting. The path is URL-encoded and can use `~` for the home directory. ```APIDOC ## GET /viewer/{path} ### Description Renders files and directories as HTML pages. Supports Markdown, Jupyter notebooks, images, and plain text with syntax highlighting. ### Method GET ### Endpoint `/viewer/{path}` ### Parameters #### Path Parameters - **path** (string) - Required - The URL-encoded path to the file or directory. Can use `~` for the home directory. ### Request Example ```bash curl -H "Accept: text/html" "http://localhost:31622/viewer/home/user/notes.md" ``` ### Response #### Success Response (200) - **HTML Page** - The rendered content as a full HTML page. #### Response Example ```html notes.md

Live Preview

This content updates instantly!

``` ``` -------------------------------- ### Health Check API - GET /health Source: https://context7.com/jannis-baum/vivify/llms.txt Checks if the server is running and optionally if clients are connected at a specific path. ```APIDOC ## GET /health ### Description Checks if the server is running and optionally if clients are connected at a specific path. ### Method GET ### Endpoint `/health` or `/health/{path}` ### Parameters #### Path Parameters - **path** (string) - Optional - The URL-encoded path to check for connected clients. Can use `~` for the home directory. ### Request Example ```bash # Check if server is running curl "http://localhost:31622/health" # Check if clients are viewing a specific file curl "http://localhost:31622/health/home/user/notes.md" ``` ### Response #### Success Response (200) - **Empty Body** - Indicates the server is running or clients are connected to the specified path. #### Error Response (404) - **Empty Body** - Indicates no clients are connected to the specified path (only applicable when a path is provided to the health check). ``` -------------------------------- ### Get Raw File Content via Viewer API Source: https://context7.com/jannis-baum/vivify/llms.txt Retrieve the raw content of a file (e.g., an image) by omitting the `Accept: text/html` header when using the `/viewer/{path}` endpoint. ```bash # Get raw file content (non-HTML Accept header) curl "http://localhost:31622/viewer/~/image.png" ``` -------------------------------- ### Custom CSS for Alerts and Print Styles Source: https://context7.com/jannis-baum/vivify/llms.txt Custom CSS for styling alerts and applying print-specific styles. Includes examples for custom alert types, fallback colors, hiding navigation, and page breaks. ```css /* Custom color for a custom alert type */ .alert-custom { --color: #00ff00; } /* Multi-word alert names use kebab-case */ .alert-my-custom-alert { --color: var(--alert-important); } /* Fallback alert color for unconfigured types */ .fallback-alert { --color: #888888; } /* Hide front matter button */ #front-matter-button { display: none; } /* PDF customization: page break before h2 */ h2 { break-before: page; } /* Print-only styles */ @media print { #top-nav { display: none; } } ``` -------------------------------- ### Configure Multiple Custom Alert Icons and Styles Source: https://github.com/jannis-baum/vivify/blob/main/docs/alerts.md This JSON configuration sets specific Octicon icons for several custom alert types like TODO, QUESTION, EXAMPLE, SUCCESS, and FAILURE. This is useful for creating distinct visual cues for different kinds of information. ```json { "alertOptions": { "icons": { "todo": "check-circle", "question": "question", "example": "list-unordered", "success": "check", "failure": "x" } } } ``` -------------------------------- ### Hide Elements for Print Media with CSS Source: https://github.com/jannis-baum/vivify/blob/main/docs/pdfs.md Employ `@media print` queries to apply styles exclusively to PDFs. This example hides the top navigation element (`#top-nav`) which is not relevant for printed documents. ```css @media print { #top-nav { display: none; } } ``` -------------------------------- ### Match Alert Colors to Defaults with CSS Variables Source: https://github.com/jannis-baum/vivify/blob/main/docs/alerts.md This CSS example shows how to set the color for a custom alert type to match the default 'important' alert's color using a CSS variable. ```css .alert-custom { --color: var(--alert-important); } ``` -------------------------------- ### Connect to development server Source: https://github.com/jannis-baum/vivify/blob/main/docs/CONTRIBUTING.md Connects an instance to the running development server. ```sh yarn viv . ``` -------------------------------- ### Show viv CLI Help Source: https://context7.com/jannis-baum/vivify/llms.txt Display the help information for the `viv` command, listing available options and usage. ```bash # Show help viv --help ``` -------------------------------- ### Upgrade dependencies interactively Source: https://github.com/jannis-baum/vivify/blob/main/docs/upgrading-dependencies.md Use this command to select and update packages to their latest versions. ```bash yarn upgrade-interactive --latest ``` -------------------------------- ### View Multiple Files/Directories with viv CLI Source: https://context7.com/jannis-baum/vivify/llms.txt Use the `viv` command to open multiple files and directories simultaneously in the browser. ```bash # View multiple files viv file1.md file2.md directory/ ``` -------------------------------- ### View Directory with viv CLI Source: https://context7.com/jannis-baum/vivify/llms.txt Use the `viv` command to open a directory in the browser, displaying its contents. ```bash # View a directory viv ~/projects/my-project ``` -------------------------------- ### Deduplicate dependencies Source: https://github.com/jannis-baum/vivify/blob/main/docs/upgrading-dependencies.md Run these commands to clean up dependency versions and resolve security issues. ```bash yarn deduplicate ``` ```bash yarn ``` -------------------------------- ### Internal Open API - POST /_open Source: https://context7.com/jannis-baum/vivify/llms.txt Used for inter-process communication to open files and send commands to existing viewers. ```APIDOC ## POST /_open ### Description Used for inter-process communication to open files and send commands to existing viewers. ### Method POST ### Endpoint `/_open` ### Parameters #### Request Body - **path** (string) - Required - The path to the file to open. - **command** (string) - Optional - The command to send to the viewer (e.g., "SCROLL"). - **value** (any) - Optional - The value associated with the command (e.g., line number for "SCROLL"). ### Request Example ```bash # Open a file in the browser curl -X POST "http://localhost:31622/_open" \ -H "Content-Type: application/json" \ -d '{"path": "/home/user/documents/notes.md"}' # Open a file and scroll to a specific line curl -X POST "http://localhost:31622/_open" \ -H "Content-Type: application/json" \ -d '{"path": "/home/user/notes.md", "command": "SCROLL", "value": 50}' ``` ``` -------------------------------- ### Open File and Scroll via Internal Open API Source: https://context7.com/jannis-baum/vivify/llms.txt Send a POST request to `/_open` with `path`, `command: "SCROLL"`, and `value` to open a file and scroll to a specific line. ```bash # Open a file and scroll to a specific line curl -X POST "http://localhost:31622/_open" \ -H "Content-Type: application/json" \ -d '{"path": "/home/user/notes.md", "command": "SCROLL", "value": 50}' ``` -------------------------------- ### Combine Content Update and Scroll via Live Content API Source: https://context7.com/jannis-baum/vivify/llms.txt Send a POST request to `/viewer/{path}` with both `content` and `cursor` fields in the JSON payload to update content and adjust the scroll position simultaneously. ```bash # Combined: update content and scroll curl -X POST "http://localhost:31622/viewer/home/user/notes.md" \ -H "Content-Type: application/json" \ -d '{"content": "# Updated\n\nNew content here", "cursor": 10}' ``` -------------------------------- ### Configure Supported File Types Source: https://context7.com/jannis-baum/vivify/llms.txt Define file extensions and MIME types for rendering behavior, including Markdown, Jupyter notebooks, and syntax-highlighted code. ```javascript // Files rendered as Markdown (configurable via mdExtensions) const markdownExtensions = ['md', 'markdown', 'mdown', 'mdwn', 'mkd', 'mkdn']; // Jupyter notebooks with cell output rendering const notebookExtension = 'ipynb'; // Images displayed inline const imageTypes = ['image/png', 'image/jpeg', 'image/gif', 'image/svg+xml']; // Plain text files with syntax highlighting // Extension is used for language detection const codeFile = 'example.py'; // Highlighted as Python const configFile = 'config.json'; // Highlighted as JSON // HTML files (optionally rendered as-is with renderHTML: true) const htmlFile = 'page.html'; ``` -------------------------------- ### Open File via Internal Open API Source: https://context7.com/jannis-baum/vivify/llms.txt Use the POST `/_open` endpoint with a JSON payload containing the `path` to open a file in the browser via inter-process communication. ```bash # Open a file in the browser curl -X POST "http://localhost:31622/_open" \ -H "Content-Type: application/json" \ -d '{"path": "/home/user/documents/notes.md"}' ``` -------------------------------- ### Live Content API - POST /viewer/{path} Source: https://context7.com/jannis-baum/vivify/llms.txt Enables live content updates, cursor synchronization, and reload functionality. Editor plugins use this to send real-time updates without saving the file. ```APIDOC ## POST /viewer/{path} ### Description Enables live content updates, cursor synchronization, and reload functionality. Editor plugins use this to send real-time updates without saving the file. ### Method POST ### Endpoint `/viewer/{path}` ### Parameters #### Path Parameters - **path** (string) - Required - The URL-encoded path to the file. Can use `~` for the home directory. #### Request Body - **content** (string) - Optional - The new content to update. - **cursor** (integer) - Optional - The cursor position to scroll to. - **reload** (boolean) - Optional - Triggers a hard reload from disk for live-reloadable files. ### Request Example ```bash # Send live content update (soft reload) curl -X POST "http://localhost:31622/viewer/home/user/notes.md" \ -H "Content-Type: application/json" \ -d '{"content": "# Live Preview\n\nThis content updates instantly!"}' # Scroll to source line 42 curl -X POST "http://localhost:31622/viewer/home/user/notes.md" \ -H "Content-Type: application/json" \ -d '{"cursor": 42}' # Combined: update content and scroll curl -X POST "http://localhost:31622/viewer/home/user/notes.md" \ -H "Content-Type: application/json" \ -d '{"content": "# Updated\n\nNew content here", "cursor": 10}' # Trigger reload from file (for live-reloadable files) curl -X POST "http://localhost:31622/viewer/home/user/notes.md" \ -H "Content-Type: application/json" \ -d '{"reload": true}' ``` ### Response #### Success Response (200) - **clients** (integer) - The number of connected viewers. #### Response Example ```json { "clients": 2 } ``` ``` -------------------------------- ### Scroll to Source Line via Live Content API Source: https://context7.com/jannis-baum/vivify/llms.txt Send a POST request to `/viewer/{path}` with a JSON payload containing the `cursor` field to scroll the viewer to a specific source line. ```bash # Scroll to source line 42 curl -X POST "http://localhost:31622/viewer/home/user/notes.md" \ -H "Content-Type: application/json" \ -d '{"cursor": 42}' ``` -------------------------------- ### Pandas DataFrame Creation and Display Source: https://github.com/jannis-baum/vivify/blob/main/tests/rendering/notebook.ipynb Creates a simple Pandas DataFrame and displays it. This is a standard way to test data handling and tabular output rendering. ```python import pandas as pd df = pd.DataFrame({ 'a': [1, 2, 3], 'b': [10, 20, 30] }) df ``` -------------------------------- ### Render Mermaid Flowcharts Source: https://github.com/jannis-baum/vivify/blob/main/tests/rendering/markdown-additional.md Create flowcharts using Mermaid syntax. ```mermaid flowchart LR A[Hard] -->|Text| B(Round) B --> C{Decision} C -->|One| D[Result 1] C -->|Two| E[Result 2] ``` -------------------------------- ### Send Live Content Update via Live Content API Source: https://context7.com/jannis-baum/vivify/llms.txt Use the POST `/viewer/{path}` endpoint with `Content-Type: application/json` to send updated content for a soft reload. The `content` field contains the new Markdown. ```bash # Send live content update (soft reload) curl -X POST "http://localhost:31622/viewer/home/user/notes.md" \ -H "Content-Type: application/json" \ -d '{"content": "# Live Preview\n\nThis content updates instantly!"}' ``` -------------------------------- ### View Markdown File and Scroll to Line with viv CLI Source: https://context7.com/jannis-baum/vivify/llms.txt Open a Markdown file and navigate directly to a specific line number using the `viv` command. ```bash # View a file and scroll to line 50 viv ~/documents/notes.md:50 ``` -------------------------------- ### Custom Alert Marker Source: https://github.com/jannis-baum/vivify/blob/main/docs/alerts.md Demonstrates how to use a custom multi-word string as an alert marker, similar to Obsidian's callouts. By default, it styles like `[!NOTE]`. ```markdown > [!CUSTOM MARKER] > Lorem ipsum ``` -------------------------------- ### Render Markdown File via Viewer API Source: https://context7.com/jannis-baum/vivify/llms.txt Use `curl` to request a Markdown file via the `/viewer/{path}` endpoint. Ensure the `Accept: text/html` header is set for HTML rendering. ```bash # View a Markdown file curl -H "Accept: text/html" "http://localhost:31622/viewer/home/user/notes.md" ``` -------------------------------- ### Render Markdown File with Tilde Path via Viewer API Source: https://context7.com/jannis-baum/vivify/llms.txt Access Markdown files using the tilde (`~`) character for the home directory in the `/viewer/{path}` endpoint. ```bash # View with tilde for home directory curl -H "Accept: text/html" "http://localhost:31622/viewer/~/documents/readme.md" ``` -------------------------------- ### Clear Live Content - DELETE /viewer/{path} Source: https://context7.com/jannis-baum/vivify/llms.txt Clears cached live content and triggers a hard reload from disk. ```APIDOC ## DELETE /viewer/{path} ### Description Clears cached live content and triggers a hard reload from disk. ### Method DELETE ### Endpoint `/viewer/{path}` ### Parameters #### Path Parameters - **path** (string) - Required - The URL-encoded path to the file or directory. Can use `~` for the home directory. If omitted, clears all live content. ### Request Example ```bash # Clear live content for a specific file curl -X DELETE "http://localhost:31622/viewer/home/user/notes.md" # Clear all live content across all files curl -X DELETE "http://localhost:31622/viewer/" ``` ### Response #### Success Response (200) - **clients** (integer) - The number of clients that were reloaded. #### Response Example ```json { "clients": 1 } ``` ``` -------------------------------- ### Define branch naming convention Source: https://github.com/jannis-baum/vivify/blob/main/docs/CONTRIBUTING.md Use this format for branch names to link them to specific issues. ```plain 134-add-branch-naming-convention ``` -------------------------------- ### Integrate Editor Plugins with Vivify API Source: https://context7.com/jannis-baum/vivify/llms.txt Use the HTTP API to push live content updates and cursor positions to the Vivify viewer. Ensure the local server is running on port 31622. ```javascript // Example editor plugin integration async function sendLiveContent(filePath, content, cursorLine) { const url = `http://localhost:31622/viewer${filePath}`; const response = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ content: content, cursor: cursorLine }) }); const result = await response.json(); console.log(`Updated ${result.clients} viewer(s)`); } // Send update on buffer change editor.on('change', (buffer) => { sendLiveContent(buffer.path, buffer.content, buffer.cursorLine); }); // Clear live content when closing file async function clearLiveContent(filePath) { await fetch(`http://localhost:31622/viewer${filePath}`, { method: 'DELETE' }); } ``` -------------------------------- ### Restart Vivify Server Source: https://github.com/jannis-baum/vivify/blob/main/docs/customization.md Use this command to stop the Vivify server process, which effectively reloads the configuration upon restart. ```sh pkill -f vivify-server ``` -------------------------------- ### Exception Handling in Python Source: https://github.com/jannis-baum/vivify/blob/main/tests/rendering/notebook.ipynb Illustrates a simple exception being raised and caught. This snippet is useful for testing error reporting and traceback formatting within the notebook environment. ```python def some_fun(): raise Exception('Hehe') def some_other_fun(): some_fun() some_other_fun() ``` -------------------------------- ### HTML definition list Source: https://github.com/jannis-baum/vivify/blob/main/tests/rendering/markdown-extended.md A definition list using standard HTML tags. ```html
Firefox
Mozilla Firefox
Fx
A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.
``` -------------------------------- ### Client-side WebSocket Connection and Message Handling Source: https://context7.com/jannis-baum/vivify/llms.txt Connects to a WebSocket server for real-time updates. Handles commands like UPDATE, SCROLL, RELOAD, and PRINT. Registers the file path being viewed upon connection. ```javascript // Client-side WebSocket connection const ws = new WebSocket('ws://localhost:31622'); // Register the file path being viewed ws.addEventListener('open', () => { ws.send('PATH: /home/user/notes.md'); }); // Handle server messages ws.addEventListener('message', (event) => { const [command, ...values] = event.data.split(': '); const value = values.join(': '); switch (command) { case 'UPDATE': // Soft reload: replace body content with new HTML document.getElementById('body-content').innerHTML = value; break; case 'SCROLL': // Scroll to source line number const line = parseInt(value); const target = document.querySelector(`[data-source-line="${line - 1}"]`); if (target) target.scrollIntoView({ behavior: 'smooth' }); break; case 'RELOAD': // Hard reload the page window.location.reload(); break; case 'PRINT': // Debug message console.log(value); break; } }); ``` -------------------------------- ### Clear All Live Content via DELETE API Source: https://context7.com/jannis-baum/vivify/llms.txt Send a DELETE request to the root `/viewer/` endpoint to clear cached live content for all files and trigger hard reloads. ```bash # Clear all live content across all files curl -X DELETE "http://localhost:31622/viewer/" ``` -------------------------------- ### Trigger Reload from File via Live Content API Source: https://context7.com/jannis-baum/vivify/llms.txt Use the POST `/viewer/{path}` endpoint with `{"reload": true}` in the JSON payload to trigger a hard reload of live-reloadable files from disk. ```bash # Trigger reload from file (for live-reloadable files) curl -X POST "http://localhost:31622/viewer/home/user/notes.md" \ -H "Content-Type: application/json" \ -d '{"reload": true}' ``` -------------------------------- ### Configure Alert Options Source: https://github.com/jannis-baum/vivify/blob/main/docs/customization.md Customize alert styles in Vivify by providing an object with icon and title mappings, and a fallback icon. This allows for custom alert types beyond the default GitHub-style alerts. ```json "alertOptions": { "icons": { "foo": "zap", "bar": "./icons/flower.svg" "titles": { "bar": "Tip of the day" }, "fallbackIcon": "alert" } ``` -------------------------------- ### Render Graphviz Diagrams Source: https://github.com/jannis-baum/vivify/blob/main/tests/rendering/markdown-additional.md Define directed graphs using the Graphviz DOT language. ```graphviz digraph { rankdir = LR A -> B } ``` -------------------------------- ### HTML Escaping in Python Source: https://github.com/jannis-baum/vivify/blob/main/tests/rendering/notebook.ipynb Demonstrates how to print a string containing HTML tags. This is useful for verifying that the system correctly handles or escapes HTML content to prevent rendering issues or security vulnerabilities. ```python print('We also have to be careful escaping HTML like hehe') ``` -------------------------------- ### Configure Fallback Alert Icon Source: https://github.com/jannis-baum/vivify/blob/main/docs/alerts.md This JSON configuration sets a default icon ('alert') for any custom alert that does not have a specific icon configured. This ensures a consistent fallback appearance. ```json { "alertOptions": { "fallbackIcon": "alert" } } ``` -------------------------------- ### Access Front Matter Data via JavaScript Source: https://github.com/jannis-baum/vivify/blob/main/tests/rendering/markdown-additional.md Use this script to parse and log front matter data from a document element. The anonymous function wrapper prevents variable redefinition issues during soft reloads. ```javascript (() => { const frontMatterElement = document.getElementById('front-matter'); if (frontMatterElement) { try { const frontMatter = JSON.parse(frontMatterElement.textContent); console.log('front matter:', frontMatter); } catch (err) { console.error('Failed to parse front matter JSON:', err); } } })() ``` -------------------------------- ### Vivify Server Environment Variables Source: https://context7.com/jannis-baum/vivify/llms.txt Environment variables to control Vivify server behavior, such as port and timeout settings. Can be used to override configuration file settings. ```bash # Set custom port (default: 31622) export VIV_PORT=8080 # Set timeout in milliseconds (default: 10000) # Server shuts down after this time with no connected clients export VIV_TIMEOUT=30000 # Disable timeout (server runs indefinitely) export VIV_TIMEOUT=0 # Run Vivify with custom settings VIV_PORT=3000 VIV_TIMEOUT=0 viv ~/notes.md ``` -------------------------------- ### Clear Live Content for Specific File via DELETE API Source: https://context7.com/jannis-baum/vivify/llms.txt Send a DELETE request to `/viewer/{path}` to clear cached live content for a specific file and force a hard reload from disk. ```bash # Clear live content for a specific file curl -X DELETE "http://localhost:31622/viewer/home/user/notes.md" ``` -------------------------------- ### Default GitHub Alerts Source: https://github.com/jannis-baum/vivify/blob/main/docs/alerts.md These markdown snippets represent the five default alert types available, styled without any additional configuration. ```markdown > [!NOTE] > Lorem ipsum ``` ```markdown > [!TIP] > Lorem ipsum ``` ```markdown > [!IMPORTANT] > Lorem ipsum ``` ```markdown > [!WARNING] > Lorem ipsum ``` ```markdown > [!CAUTION] > Lorem ipsum ``` -------------------------------- ### Configure Custom Alert Icons Source: https://github.com/jannis-baum/vivify/blob/main/docs/alerts.md This JSON configuration assigns a custom Octicon named 'bell' to alerts with the marker 'custom'. Ensure the icon name is a valid Octicon identifier. ```json { "alertOptions": { "icons": { "custom": "bell" } } } ``` -------------------------------- ### Access Front Matter with JavaScript Source: https://github.com/jannis-baum/vivify/blob/main/docs/front-matter.md Use this JavaScript snippet to retrieve and parse front matter data from the DOM. Ensure the front matter element exists before attempting to parse. ```javascript const frontMatterElement = document.getElementById('front-matter'); if (frontMatterElement) { try { const frontMatter = JSON.parse(frontMatterElement.textContent); console.log('front matter:', frontMatter); } catch (err) { console.error('Failed to parse front matter JSON:', err); } } ``` -------------------------------- ### Test Markdown File Pattern Source: https://github.com/jannis-baum/vivify/blob/main/docs/customization.md Use this JavaScript code in your browser console to test regular expressions for Markdown file patterns. It checks if a given path matches the specified pattern. ```javascript new RegExp("^.*/calcurse-note\\.[a-zA-Z0-9]{6}$").test("/tmp/calcurse-note.Vf21ma") ``` -------------------------------- ### Format conventional commit message Source: https://github.com/jannis-baum/vivify/blob/main/docs/CONTRIBUTING.md Include the issue number as context in commit messages. ```plain docs(#134): mention convention in CONTRIBUTING.md ``` -------------------------------- ### Configure Custom Alert Titles Source: https://github.com/jannis-baum/vivify/blob/main/docs/alerts.md This JSON configuration sets a default custom title for all 'note' type alerts. This title will be used whenever `[!NOTE]` is encountered, unless overridden by an inline title. ```json { "alertOptions": { "titles": { "note": "A custom title" } } } ``` -------------------------------- ### Custom Alert Title Source: https://github.com/jannis-baum/vivify/blob/main/docs/alerts.md Shows how to specify a custom title for an alert directly in the markdown. This overrides any default or configured title for the alert type. ```markdown > [!NOTE] A custom title > Lorem ipsum ``` -------------------------------- ### Print Formatted Colors in Python Source: https://github.com/jannis-baum/vivify/blob/main/tests/rendering/notebook.ipynb Iterates through a list of colors and prints them with different ANSI escape codes for foreground and background colors, both normal and bright. Useful for testing terminal color rendering. ```python colors = ['black', 'red', 'green', 'yellow', 'blue', 'magenta', 'cyan', 'white'] for (i, c) in enumerate(colors): print(f'{c: >8} \033[3{i}mfg_normal\033[0m \033[4{i}mbg_normal\033[0m \033[9{i}mfg_bright\033[0m \033[10{i}mbg_bright\033[0m') ``` -------------------------------- ### Plain text fenced code block Source: https://github.com/jannis-baum/vivify/blob/main/tests/rendering/markdown-extended.md A standard fenced code block without syntax highlighting. ```text # Plain text # no highlighting here...

Some embedded html

$foo = "Hello World" ``` -------------------------------- ### Customize Alert Colors with CSS Source: https://github.com/jannis-baum/vivify/blob/main/docs/alerts.md These CSS rules define custom colors for alert types. The `--color` variable affects the left-side border, title icon, and title text. Use kebab-case for multi-word markers. ```css .alert-custom { --color: #00ff00; } ``` ```css .alert-my-multi-word-name { --color: #00ff00; } ``` -------------------------------- ### HTML fenced code block Source: https://github.com/jannis-baum/vivify/blob/main/tests/rendering/markdown-extended.md A fenced code block with HTML syntax highlighting. ```html

This is some really huge text!

``` -------------------------------- ### Apply Custom Alert Colors for Specific Types Source: https://github.com/jannis-baum/vivify/blob/main/docs/alerts.md These CSS rules assign specific color themes to custom alert types by referencing the default alert color variables. This allows for consistent styling across different custom alerts. ```css .alert-todo { --color: var(--alert-note); } ``` ```css .alert-question { --color: var(--alert-warning); } ``` ```css .alert-example { --color: var(--alert-important); } ``` ```css .alert-success { --color: var(--alert-tip); } ``` ```css .alert-failure { --color: var(--alert-caution); } ``` -------------------------------- ### Customize Fallback Alert Color with CSS Source: https://github.com/jannis-baum/vivify/blob/main/docs/alerts.md This CSS rule defines the color for any alert that does not have a specific marker configured. The class `.fallback-alert` targets these unconfigured alerts, allowing for a distinct visual style. ```css .fallback-alert { --color: #ff0000; } ``` -------------------------------- ### Pandas DataFrame Plotting Source: https://github.com/jannis-baum/vivify/blob/main/tests/rendering/notebook.ipynb Generates a basic plot from a Pandas DataFrame using a specified figure size. This tests the integration with plotting libraries and the rendering of charts. ```python df.plot(figsize=(1, 1)) ``` -------------------------------- ### Break Page Before H2 Headings with CSS Source: https://github.com/jannis-baum/vivify/blob/main/docs/pdfs.md Use the `break-before: page;` CSS property to automatically insert a page break before every H2 heading in your PDF output. This requires adding the CSS to your custom style sheet. ```css h2 { break-before: page; } ``` -------------------------------- ### Hide Front Matter Code Block with CSS Source: https://github.com/jannis-baum/vivify/blob/main/docs/front-matter.md Apply this CSS rule to your custom styles to prevent the front matter from displaying as a collapsible code block. ```css #front-matter-button { display: none; } ``` -------------------------------- ### Footnote code snippet Source: https://github.com/jannis-baum/vivify/blob/main/tests/rendering/markdown-extended.md A code snippet embedded within a footnote definition. ```text `{ my code }` ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.