{"id":22317829,"url":"https://github.com/ken-okabe/vscode-markdown-note","last_synced_at":"2025-07-29T12:31:07.473Z","repository":{"id":181754319,"uuid":"667189897","full_name":"ken-okabe/vscode-markdown-note","owner":"ken-okabe","description":"A WYSIWYG Markdown Editor that supports the Markdown features used on GitHub site and beyond","archived":false,"fork":false,"pushed_at":"2024-04-19T12:18:48.000Z","size":87196,"stargazers_count":5,"open_issues_count":3,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-19T13:36:30.681Z","etag":null,"topics":["editor","github","markdown","productivity","vscode-extension","wysiwyg"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=KenOkabe.markdownnote","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ken-okabe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2023-07-16T23:50:32.000Z","updated_at":"2024-04-19T13:36:44.444Z","dependencies_parsed_at":"2024-04-19T13:36:34.597Z","dependency_job_id":"33a2899c-df14-44cb-989f-ea836c65c16c","html_url":"https://github.com/ken-okabe/vscode-markdown-note","commit_stats":null,"previous_names":["ken-okabe/vscode-markdown-note"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ken-okabe%2Fvscode-markdown-note","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ken-okabe%2Fvscode-markdown-note/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ken-okabe%2Fvscode-markdown-note/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ken-okabe%2Fvscode-markdown-note/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ken-okabe","download_url":"https://codeload.github.com/ken-okabe/vscode-markdown-note/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228012214,"owners_count":17855984,"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":["editor","github","markdown","productivity","vscode-extension","wysiwyg"],"created_at":"2024-12-03T23:11:29.295Z","updated_at":"2024-12-03T23:11:29.993Z","avatar_url":"https://github.com/ken-okabe.png","language":"TypeScript","readme":"![](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/showcase.png)\n\n![](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/demo06.gif)\n\n## is also the ultimate note \u0026 memo App built on VSCode\n\n![image](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/todo.gif)\n\n## VSCode + Markdown + WYSIWYG = Productivity\n\n---\n\n# 🔷 Seamless\n\n![](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/demo00.gif)\n\n**Click**  on what you want to edit to enter input mode.\n\nOnce you finish editing, press the   `ESC`  key.\n\nPress the   `ESC`   key again to return to input mode.\n\n---\n\n# 🔷 Cell Editing\n\n![](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/demo01.gif)\n\n**Cell**  is familiar to Jupyter Notebook users.\n\nEvery  **Cell**  has its  **own isolated editing history** , so  **undo\u0026redo**  works uniquely.\n\n---\n\n# 🔷 Headers\n\n![](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/demo02.gif)\n\nYou can see the exact header size based on the current CSS  **before converting to HTML**  by entering  `#` .\n\n---\n\n# 🔷 Paste URL \u0026 ImageURL from Clipboard\n\n![](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/demo_image.gif)\n\nYou can use a shortcut key (`Ctrl+L` for URLs, `Ctrl+P` for images by default Key Bindings) to paste  **URLs**  or  **imageURLs**  from the clipboard as Markdown  on *selected text* .\n\nHere is how it goes:\n\n0. Your clipboard has an imageURL:  [https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/octcat.png](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/octcat.png)\n\n1. Type any image name in the Cell (**octcat**) \n2. Select all, then paste the **imageURL** (`Ctrl+A,P`)\n3. Exit the Cell (`Esc`)\n\n**Alternatively, you can skip typing the image name and just**\n\n1. Paste the **imageURL** (`Ctrl+P`)\n2. Exit the Cell (`Esc`)\n\n**and it will work just fine 😎**\n\nFor **imageURLs**, `image` is used as the default name.\n\nFor **URLs**, the pasted URL itself is used as the default link text. So when you just paste `https://github.com/` with `Ctrl+L`, the result will be [https://github.com/](https://github.com/).\n\n![](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/demo_url.gif)\n\n---\n\n# 🔷 Drag\u0026Drop Cells\n\n![](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/demo04.gif)\n\n---\n\n# 🔷 GFM \u0026 features supported by GitHub\n\n![](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/demo05.gif)\n\n---\n\n# 🔷 Paste Code \u0026 Mathematics(LaTeX) from Clipboard\n\nIn **Markdown Note**, you can add **Code \u0026 Mathematics(LaTeX)** in the same way as  **Paste URL \u0026 ImageURL from Clipboard**.\n\n- We usually copy\u0026paste  **URLs**  \u0026  **ImageURLs**  from the clipboard.\n- We usually copy\u0026paste  **Code**  \u0026  **Mathematics(LaTeX)**  from the clipboard.\n\n---\n\n$Mathematics(LaTeX)$\n\n0. Your clipboard has:\n`\\Gamma(z) = \\int_0^\\infty t^{z-1}e^{-t}dt\\,.`\n\n1. Paste the **Math** (`Ctrl+M`)\n2. Exit the Cell (`Esc`)\n\n![](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/demo_mathjax.gif)\n\n---\n\n$Code (including Mermaid)$\n\n0. Your clipboard has:\n\n```\ngraph LR\nA[Square Rect] -- Link text --\u003e B((Circle))\nA --\u003e C(Round Rect)\nB --\u003e D{Rhombus}\nC --\u003e D\n```\n\n1. Paste the **Code** (`Ctrl+K`)\n2. Exit the Cell (`Esc`)\n\n![](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/demo_mermaid.gif)\n\n---\n\n$Inline$\n\nTo insert **inlineCode** \u0026 **inlineMath**, you can use the same operation as for (inline) **Bold** or (inline) **Italic**, that is, select the  *target strings* , then press the **ShortcutKey**: `Ctrl+?`.\n\n---\n\n# 🔷 ReadOnly \u0026 Writable Mode\n\n![](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/demo_readonly.gif)\n\nBy default,  **Markdown Note**  works in  **Writable Mode** , but some web elements need user's click action even in Markdown documents.\n\nFor example,  **Markdown used in GitHub**  ( *not GitHub Flavored Markdown Spec* ) supports `\u003cdetails\u003e` and `\u003csummary\u003e` html tags.\n\nTo test the native behavior, you can switch to  **ReadOnly Mode**  temporarily with `Ctrl+Esc`.\n\n![](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/demo_detail.gif)\n\nIn  **ReadOnly Mode** , the default behavior of  **Markdown Note**  is paused and you can click the element in the standard manner.\n\nThis way, you can see how `\u003cdetails\u003e` and `\u003csummary\u003e` html tags work.\n\nPressing `Ctrl+Esc` again  will return to the default  **Writable Mode**.\n\n---\n\n# 🔷 Unidirectional Data Flow\n\nBidirectional data flow might look cool, but it often causes confusion for both humans and software architectures.\n\n**The conventional Markdown Preview**  has a unidirectional data flow :\n\n- Markdown source code -\u003e The read-only preview.\n\n**Markdown Note**  also uses the same simple unidirectional design, but *in the opposite direction* :\n\n- WYSIWYG Editor -\u003e Markdown source code.\n\n---\n\n# 🔷 Reload to Side or Overlay\n\n![](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/demo08.gif)\n\nThe user needs to **reload the contents explicitly after editing the Markdown source code in the standard VSCode editor, since the data flow is unidirectional** .\n\nThe user can choose which panel to reload:\n\n-  **to Side** \n-  **Overlay**\n\nThe reload action helps to **reconstruct the entire markdown Cells with integrity** after a full modification of the document by native editing.\n\n---\n\n# 🔷 Key Bindings (Extension Keyboard Shortcuts)\n\n![](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/keybindings.png)\n\n![](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/keylayout.png)\n\nYou can use Key Bindings for everything except drag and drop; you can also customize them.\n\n---\n\n# 🔷 Paste Images with one Keystroke\n\nThe general key binding `Ctrl+V` for **pasting** works for **both text and images** .\n\nWith one Keystroke, this feature allows you to **upload the clipboard image** to *your own image-only repository on GitHub* and automatically insert its URL in the Cell to display it.\n\nYou need to create *a dedicated image repository* and *an access token on GitHub* to use this feature. **This feature does not work with secret repositories, and your images will be public.**\n\nYou can also use *a secret Gist* to store your images, but there is no API for that yet.\n\nYou can still display images by using your own URL as before, if you prefer not to use a public repository or a secret Gist.\n\n---\n\n# 🔷 Works with VSCode’s full potential\n\n![](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/demo07.gif)\n\nYou can use VSCode features, such as **undo/redo/select the whole document** , or **managing files with directories and Git** , for any operations that are not suitable for the Cell editing.\n\n![](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/demo_all.gif)\n\n---\n\n# 🔷 Getting Started\n\n## Take advantage of VSCode  `Empty Profile`\n\n**To get started quickly and simply, you can take advantage of an empty and isolated VSCode profile to install Markdown Note, or use any VSCode profile you like later.**\n\n---\n\n## 0. Create a new VSCode  `Empty Profile`, then install Markdown Note\n\n### Click ⚙️ at the left bottom to Create Profile\n\n![image](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/setup/0profile.png)\n\n### Select  `Empty Profile`\n\n![image](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/setup/1emptyprofile.png)\n\n### Let's name the new profile  `writing`\n\n![image](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/setup/2writing.png)\n\n### Now you have the new `Empty Profile`\n\n![image](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/setup/3profilecreated.png)\n\n### Finally, please remember to install  Markdown Note in the new `Empty Profile` !!😎\n\n---\n\n## 1. Copy\u0026Paste the `JSON`  *copied at the built-in walkthrough page*  into the empty  `settings.json`  of `Empty Profile`\n\n### After installing Markdown Note, the built-in Setup Walkthrough page will automatically launch.\n\n### Use `Ctrl+A` to select all, then `Ctrl+C` to copy the generated  `JSON`  on the page.\n\n###\n\n![image](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/setup/walkthrough.png)\n\n### Paste (`Ctrl+A,P`) into the empty  `settings.json`  of `Empty Profile`\n\n![image](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/setup/7blankobject.png)\n\n### Save ( `Ctrl+S` ) and Done!\n\n**The built-in Setup Walkthrough page guides you step by step and does not require VSCode reload, so for now just prepare  `Empty Profile`.**\n\n---\n\n## Command for VSCode Profiles\n\n**You can use the `--profile` command-line interface option to launch VS Code with a specific profile.**\n\n```sh\ncode --profile writing my-documents\n```\n\n**A new `Empty Profile` with the given name is created if the profile specified does not exist.**\n\n---\n\n# 🔷 Settings \u0026 Customizations\n\n## `settings.json` Simplified\n\nHere is a simplified `settings.json`  .\n\n![image](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/setup/settings-json.png)\n\n---\n\n### System\n\n```json\n\"files.autoSave\": \"afterDelay\",\n\"files.autoSaveDelay\": 500,\n```\n\nIf  `autoSave`  with a short interval is not enabled, the VSCode standard editor will report an error on saving that is similar to the  **Git non-fast-forward error**. This issue has not been thoroughly investigated, but  `500` ms seems to be a reliable and stable setting.\n\n---\n\n```json\n\"workbench.editor.autoLockGroups\": {\n   \"mainThreadWebview-MarkdownNote\": true\n},\n```\n\nThis is `autoLockGroups` feature, which is neccesary for  **Side-by-side mode**.  `LockGroup`  allows you to lock an editor group in VSCode to prevent unintended multi-tab experiences. Without this feature, a user would need to manually lock the group on every occasion.\n\n![image](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/setup/lockgroup.png)\n\n---\n\n### Themes\n\n```json\n\"workbench.colorTheme\": \"Visual Studio Light\",\n```\n\nIn most cases, the theme in VSCode is configured through a GUI.\n\n![image](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/setup/theme-gui.png)\n\n**Some dark themes can make the scroll bar almost invisible in Markdown Note.**\n\n---\n\n```json\n\"markdownnote.CSS\": {\n    \"URLs\": [\n    \"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css\",\n    \"https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown.min.css\",\n    \"https://unpkg.com/prism-themes@1.9.0/themes/prism-coldark-dark.min.css\"\n    ]\n},\n```\n\n[There are CSSs to replicate the GitHub Markdown style](https://github.com/sindresorhus/github-markdown-css):\n\n\u003e https://cdnjs.com/libraries/github-markdown-css\n\u003e\u003e https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown-light.css\n\u003e\u003e https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown-dark.css\n\n![image](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/setup/dark.png)\n\n[You can generate by yourself.](https://github.com/sindresorhus/generate-github-markdown-css)\n\n```sh\n$ github-markdown-css --list\nlight\ndark\ndark_dimmed\ndark_high_contrast\ndark_colorblind\nlight_colorblind\nlight_high_contrast\nlight_tritanopia\ndark_tritanopia\n```\n\nhttps://github.com/settings/appearance\n\n![image](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/setup/github-theme.png)\n\n**Code highlighting can be styled independently with [Prism](https://prismjs.com/)**\n\n---\n\n### Utility Options\n\n```json\n\"markdownnote.start_overlay\": {\n    \"true OR false\": true\n},\n```\n\nYou can select a layout ( **Overlay** or **Side-by-side** ) to start with;  **Overlay**  is the default.\n\n---\n\n```json\n\"markdownnote.image_repository\": {\n    \"repository\": \"USER/IMAGES-REPOSITORY\",\n    \"token\": \"ghp_xxxxxxxxxxxxxxxxxxxx\"\n}\n```\n\nThe general key binding `Ctrl+V` for **pasting** works for **both text and images** .\n\nWith one Keystroke, this feature allows you to **upload the clipboard image** to *your own image-only repository on GitHub* and automatically insert its URL in the Cell to display it.\n\nYou need to create *a dedicated image repository* and *an access token on GitHub* to use this feature. **This feature does not work with secret repositories, and your images will be public.**\n\nFor more information on managing personal access tokens on GitHub, you can refer to the [official documentation](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens).\n\n---\n\n# 🔷 The ultimate note \u0026 memo App built on VSCode\n\n![image](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/todo.gif)\n\nVSCode is such a great editor.\n\nThe only problem with VSCode is that it’s not suitable for  **casual use as a daily note and memo app** .\n\nThe reason is that Markdown editing is  **not WYSIWYG** .\n\n**Markdown Note transforms VSCode into your daily note and memo app, and it's probably the most powerful one in the world.**\n\nYour notes and memos are now natively managed with  **secret repos in GitHub** !\n\n![image](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/note-shortcut.png)\n\nWith combinations of VSCode profile and command, you can easily create a shortcut key to launch the app.\n\nThis is Linux \u0026 Gnome, and the way to create shortcut keys and icons differs depending on the OS.\n\nIn this case,\n\n- Profile is `note`\n- Directory is `/home/ken/Documents/note`\n- Shorcut key is `Ctrl+F1`\n\n```sh\ncode --profile note /home/ken/Documents/note\n```\n\n---\n\n# 🔷 Invest in the software that powers your world!\n\n![image](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/sponsor.png)\n\nhttps://github.com/sponsors\n\n![image](https://raw.githubusercontent.com/ken-okabe/vscode-markdown-note-images/main/contribute.png)\n\n***Markdown Note**  is also planning to join GitHub Sponsors in the near future.*\n\nIf you like this project, you can join the future of open source by investing today😉","funding_links":["https://github.com/sponsors"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fken-okabe%2Fvscode-markdown-note","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fken-okabe%2Fvscode-markdown-note","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fken-okabe%2Fvscode-markdown-note/lists"}