{"id":27232878,"url":"https://github.com/lightnet/vanjs_markdown","last_synced_at":"2025-04-10T14:10:20.858Z","repository":{"id":284677063,"uuid":"955678029","full_name":"Lightnet/vanjs_markdown","owner":"Lightnet","description":"Vanjs text editor test with markdown preview build script.","archived":false,"fork":false,"pushed_at":"2025-03-27T04:26:04.000Z","size":7,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-27T05:24:58.758Z","etag":null,"topics":["markdown","texteditor","vanjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Lightnet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-27T02:43:53.000Z","updated_at":"2025-03-27T04:26:07.000Z","dependencies_parsed_at":"2025-03-27T05:35:02.930Z","dependency_job_id":null,"html_url":"https://github.com/Lightnet/vanjs_markdown","commit_stats":null,"previous_names":["lightnet/vanjs_markdown"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lightnet%2Fvanjs_markdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lightnet%2Fvanjs_markdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lightnet%2Fvanjs_markdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lightnet%2Fvanjs_markdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Lightnet","download_url":"https://codeload.github.com/Lightnet/vanjs_markdown/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248232330,"owners_count":21069487,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["markdown","texteditor","vanjs"],"created_at":"2025-04-10T14:10:20.219Z","updated_at":"2025-04-10T14:10:20.849Z","avatar_url":"https://github.com/Lightnet.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Markdown Editor with Live Preview\n\n\n\n# License\n * MIT License - see LICENSE for details.\n\nA lightweight, browser-based Markdown editor with real-time preview, built using [VanJS](https://vanjs.org/) and [Highlight.js](https://highlightjs.org/). Write Markdown on the left, see the rendered result on the right—simple and efficient.\n\n# Information:\n  Using the Grok Beta 3 AI Model to help build this readme and script to help build markdown. As well manual edit and test for trouble shooting.\n\n  Reason for doing this to develop a test build for posting forum or blog to keep it simple.\n\n## Features\n - Live Preview: Instantly see your Markdown rendered as you type.\n - Syntax Highlighting: Code blocks with language-specific highlighting via Highlight.js (e.g., JavaScript, Python).\n - Rich Formatting:\n    - Bold (**text**), italic (*text* or _text_), strikethrough (~~text~~).\n    - Inline HTML support (e.g., \u003cb\u003ebold\u003c/b\u003e).\n    - Links ([text](url)) and images (![alt](url)).\n        \n - Block Elements:\n    - Headings (# to ######).\n    - Blockquotes (\u003e text).\n    - Unordered (- item) and ordered (1. item) lists.\n    - Tables (| Header | Header |\\n|--------|--------|\\n| Cell | Cell |).\n    - Horizontal rules (---).\n - Line Breaks: Two spaces at the end of a line (text ) insert a \u003cbr\u003e within paragraphs.\n - Paragraphs: Blank lines separate text into distinct `\u003cp\u003e tags\u003c/p\u003e`.\n    - Footnotes: Add references like [^1] with definitions [^1]: Description rendered at the bottom[^1].\n - Task Lists: Support - [ ] and - [x] for checklists.\n - Nested Lists: Support indentation for multi-level lists.\n - Anchor to heading\n```\n# Anchors in Markdown\n\nTo create an anchor to a heading in github flavored markdown. Add - characters between each word in the heading and wrap the value in parens (#some-markdown-heading) so your link should look like so:\n\n[create an anchor](#anchors-in-markdown)\n```\n\n# Preview\n * https://lightnet.github.io/vanjs_markdown\n\n\n# Pros and Cons of the Current Text Editor Preview\n\n# Pros:\n\n1. Real-Time Updates\n    - Strength: The preview updates instantly as the user types, thanks to VanJS’s reactive van.derive and editorState.val integration.\n    - Benefit: Users get immediate feedback, which is ideal for iterative writing and debugging Markdown syntax.\n        \n2. Broad Feature Support\n    - Strength: Supports a wide range of Markdown features: headings, inline formatting (bold, italic, strikethrough, code), links, images, code blocks, blockquotes, alerts, lists (unordered, ordered, task), tables, horizontal rules, footnotes, and HTML inline.\n    - Benefit: Covers most GFM features, making it versatile for common Markdown use cases.\n        \n3. Syntax Highlighting\n    - Strength: Integrates Highlight.js for code blocks with language-specific highlighting (e.g., JavaScript, Python).\n    - Benefit: Enhances readability of code snippets, a key feature for technical documentation.\n        \n4. Custom Alert Styling\n    - Strength: Implements GFM-style alerts ([!NOTE], [!TIP], etc.) with distinct CSS styling (colors and borders).\n    - Benefit: Provides visually clear callouts, improving document structure and emphasis.\n        \n5. Footnote Handling\n    - Strength: Parses footnotes ([^1]) and renders them as a separate section with backlinks, mimicking GFM behavior.\n    - Benefit: Useful for academic or detailed writing where references are needed.\n        \n6. Clean HTML Output\n    - Strength: Generates semantic HTML (e.g., `\u003ch1\u003e, \u003cstrong\u003e, \u003cblockquote\u003e`) with consistent markdown-body classes.\n    - Benefit: Easy to style further and integrates well with existing CSS frameworks.\n        \n7. Lightweight Framework\n    - Strength: Uses VanJS, a minimal reactive library (1KB), avoiding heavy dependencies like React or Vue.\n    - Benefit: Fast load times and low overhead, suitable for simple web apps.\n    - \n---\n\n# Cons:\n\n1. Parsing Limitations\n    - Weakness: parseInline processes formatting sequentially, missing nested cases (e.g., **bold *italic*** renders as \u003cstrong\u003ebold *italic*\u003c/strong\u003e instead of \u003cstrong\u003ebold \u003cem\u003eitalic\u003c/em\u003e\u003c/strong\u003e).\n    - Impact: Inconsistent rendering for complex inline formatting, reducing reliability compared to GFM.\n        \n2. No Error Feedback\n    - Weakness: Malformed Markdown (e.g., unclosed code blocks with ```) silently fails or renders oddly without user notification.\n    - Impact: Users may not realize syntax errors, leading to frustration or incorrect previews.\n        \n3. Limited Robustness\n    - Weakness: No handling for escaped characters (e.g., \\*not italic\\* renders as \u003cem\u003enot italic\u003c/em\u003e instead of *not italic*), and block precedence can misinterpret # in code blocks or blockquotes as headings.\n    - Impact: Edge cases break expected behavior, making it less trustworthy for advanced users.\n        \n4. Incomplete GFM Support\n    - Weakness: Missing features like autolinking URLs (e.g., https://example.com doesn’t become a link), emoji shortcodes (e.g., :smile:), or definition lists.\n    - Impact: Lags behind full GFM compliance, limiting compatibility with tools expecting these features.\n        \n5. Accessibility Gaps\n    - Weakness: Lacks ARIA labels for headings, footnotes, or interactive elements (e.g., task list checkboxes are disabled with no alternative).\n    - Impact: Reduced usability for screen reader users or those relying on keyboard navigation.\n        \n6. Performance with Large Documents\n    - Weakness: Re-parses the entire document on every keystroke without debouncing, and string operations (e.g., split, regex) scale poorly with size.\n    - Impact: Potential lag or browser slowdown for long Markdown files (e.g., \u003e1000 lines).\n        \n7. Static Layout\n    - Weakness: The split-pane design (editor and preview side-by-side) isn’t responsive or configurable (e.g., no toggle to hide editor).\n    - Impact: Poor experience on small screens or for users who prefer a different workflow.\n        \n8. No Undo/Redo or History\n    - Weakness: Changes to editorState.val.text are immediate with no built-in history tracking.\n    - Impact: Users can’t easily revert mistakes, a common expectation in text editors.\n        \n9. Dependency Load Risk\n    - Weakness: Highlight.js loading is async and lacks a robust fallback; if it fails, code blocks lose highlighting with no retry mechanism.\n    - Impact: Inconsistent preview quality in poor network conditions.\n    \nbash\n```bash\ngit clone https://github.com/yourusername/markdown-editor.git\ncd markdown-editor\n```\n    \n  2. Install Dependencies:\n     - Requires Node.js and npm.\n\t\n\nbash\n```bash\nnpm install\n```\n    \n  3. Run Locally:\n      - Uses a simple static server (e.g., http-server).\n        \nbash\n```bash\nnpm start\n```\n * Open http://localhost:3000 in your browser.\n\n# Usage\n - Editor: Type Markdown in the left pane.\n - Preview: See the rendered output in the right pane, updated in real-time.\n - Examples:\n    \nmarkdown\n```markdown\n# Hello World\nThis is **bold** and *italic* text.[^note]\n- List item 1\n- _List item 2_\n[^note]: A footnote example.\n```\n    \n  Renders as:\n    \nhtml\n```html\n\u003ch1\u003eHello World\u003c/h1\u003e\n\u003cp\u003eThis is \u003cstrong\u003ebold\u003c/strong\u003e and \u003cem\u003eitalic\u003c/em\u003e text.\u003csup\u003e\u003ca href=\"#fn-note\"\u003enote\u003c/a\u003e\u003c/sup\u003e\u003c/p\u003e\n\u003cul\u003e\n  \u003cli\u003eList item 1\u003c/li\u003e\n  \u003cli\u003e\u003cem\u003eList item 2\u003c/em\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003chr\u003e\n\u003csection\u003e\n  \u003ch2\u003eFootnotes\u003c/h2\u003e\n  \u003col\u003e\n    \u003cli id=\"fn-note\"\u003eA footnote example.\u003ca href=\"#fnref-note\"\u003e↩\u003c/a\u003e\u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/section\u003e\n```\n\n# Planned Features\n\nA list of enhancements to be added later:\n  - Emoji: Render :smile: as ![😊]using an emoji library.\n  - Math Support: Add LaTeX rendering (e.g., $x^2$) with KaTeX or MathJax.  \n  - Autolinks: Convert bare URLs (e.g., https://example.com) to clickable links.  \n  - Custom Styles: Allow users to toggle themes or upload CSS.\n  - Export Options: Save as HTML, Markdown, or PDF.\n  - Inline Code Blocks: Enhance styling for inline \u003ccode\u003e tags\u003c/code\u003e.\n  - Image Upload: Drag-and-drop or paste images into the editor.\n  \n[^1]: This README uses the footnote feature to demonstrate its functionality!\n\n# Notes:\n  - Features: Lists all current capabilities, matching what we’ve coded (e.g., footnotes, line breaks).\n  - Planned Features: A checklist of common Markdown extensions or editor enhancements to consider. These are unimplemented but can guide future development.\n  - Usage: Includes a sample to show off the editor’s rendering.  \n  - GitHub Ready: Assumes a repo structure with client.js and index.html. Adjust the git clone URL to your actual repo.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flightnet%2Fvanjs_markdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flightnet%2Fvanjs_markdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flightnet%2Fvanjs_markdown/lists"}