├── .github └── ISSUE_TEMPLATE │ ├── feature_request.md │ └── bug_report.yaml ├── telemetry.md ├── licensing-and-activation.md ├── README.md ├── acknowledgements.md ├── user-guide.md └── CHANGELOG.md /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /telemetry.md: -------------------------------------------------------------------------------- 1 | ## Telemetry 2 | 3 | Mark Sharp collects basic telemetry for the purpose of identifying and diagnosing bugs to improve the product. **Mark Sharp does not collect any personally identifiable information such as user credentials, Markdown contents, or file names.** Mark Sharp follows the telemetry policy of VS Code - if you opt out of reporting telemetry for VS Code itself, then telemetry for Mark Sharp will also not be collected. 4 | 5 | The following table outlines the types of data points collected: 6 | 7 | | Event Name | Description | Fields | 8 | | ------------------ | --------------------------------------------------------------------------------- | ------------ | 9 | | activated | The Mark Sharp extension was activated | _none_ | 10 | | activation-error | An error occurred during license activation | licenseKey | 11 | | deactivation-error | An error occurred during license activation | licenseKey | 12 | | webview-error | The Mark Sharp webview threw an error (either from markdown parsing or rendering) | errorMessage | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.yaml: -------------------------------------------------------------------------------- 1 | name: Bug Report 2 | description: File a bug report. 3 | body: 4 | - type: markdown 5 | attributes: 6 | value: | 7 | Thanks for taking the time to report an issue! Your feedback helps improve Mark Sharp. 8 | # - type: checkboxes 9 | # attributes: 10 | # label: Is there an existing issue for this? 11 | # description: Please search to see if an issue already exists for the bug you encountered. If one exists, please add a thumbs-up/+1 on the existing issue or comment on it. 12 | # options: 13 | # - label: I have searched the existing issues 14 | # required: true 15 | - type: textarea 16 | id: bug-description 17 | attributes: 18 | label: Describe the bug. 19 | description: A clear and concise description of the bug. Include screenshots if it helps. 20 | validations: 21 | required: true 22 | - type: textarea 23 | id: repro-steps 24 | attributes: 25 | label: Repro Steps 26 | description: Please try to be as detailed as possible as editor behaviors can be subtle. Include markdown content that led to the issue if possible (but please scrub sensitive info out first). 27 | value: | 28 | 1. 29 | 2. 30 | validations: 31 | required: true 32 | - type: input 33 | id: version 34 | attributes: 35 | label: Version 36 | description: What version of Mark Sharp are you running? i.e. 1.0.0 37 | validations: 38 | required: false 39 | - type: dropdown 40 | id: platform 41 | attributes: 42 | label: What platform are you seeing the problem on? 43 | multiple: true 44 | options: 45 | - Windows 46 | - Mac OS 47 | - Linux 48 | - vscode.dev (web) 49 | -------------------------------------------------------------------------------- /licensing-and-activation.md: -------------------------------------------------------------------------------- 1 | ## Purchasing a License 2 | 3 | A Mark Sharp Premium license can be purchased either with [this link](https://buy.stripe.com/bIY15W2Vlewpg8geUU) or within the Mark Sharp app by running the `Mark Sharp: Manage License` command. Upon purchase, an activation key will be sent to the email provided on the payment page. 4 | 5 | The license is perpetual and is valid for one user for either personal or commercial use. Please see the [End User License Agreement](https://www.marksharp.co/eula). 6 | 7 | ## Activating Your Premium License 8 | 9 | 1. In VS Code, open the command pallete (`Ctrl+P` / `Cmd+P`) and then run `> Mark Sharp: Manage License`. This will launch the licensing view. 10 | 2. At the bottom of the page, enter the license key that was sent to your email. 11 | 3. Review and Accept the EULA, and then click 'Activate'. 12 | 4. If the activation was successful, you should see "Your License is Active". 13 | 14 | _Should you encounter any problems during activation, please contact support@marksharp.co_ 15 | 16 | ## Using Your License on Multiple Devices 17 | 18 | A single license is valid for one user and one user only, but the user is permitted to use Mark Sharp Premium on multiple devices: 19 | 20 | 1. Activate your license on one device using the steps in the previous section. 21 | 2. Sign into VS Code with your Microsoft or Github account and enable settings sync by following [these instructions](https://code.visualstudio.com/docs/editor/settings-sync#_turning-on-settings-sync). 22 | 1. Make sure to tick 'Extensions' when choosing what to sync. 23 | 3. On your other device, sign into VS Code with the same account and turn on settings sync on this device as well. 24 | 4. Your premium license should carry over to your second device. To verify, run the `Mark Sharp: Manage License` command, and it should display 'Your License is Active'. 25 | 26 | This also works on [vscode.dev](https://vscode.dev/), so you can use Mark Sharp directly from your browser. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Mark Sharp 2 | 3 | [Mark Sharp](https://www.marksharp.co/) is a fast, modern Markdown editor for VS Code. Write Markdown documents quickly with familiar, standard syntax while still seeing a visually-appealing rendered Markdown document. 4 | 5 | Mark Sharp is based on [Github Flavored Markdown](https://github.github.com/gfm/) and supports extension features such as tables, Mermaid diagrams, checklists, and more. 6 | 7 | ![Feature Overview](https://mark-sharp-public.s3.us-west-2.amazonaws.com/demo-gifs/feature-overview.gif) 8 | 9 | ## Quick Start 10 | 11 | ### Installing the Extension 12 | 13 | 1. _Pre-requisite_: First install [VS Code](https://code.visualstudio.com/) if you haven't already. 14 | 2. Install Mark Sharp from the [VS Code Extension Store](https://marketplace.visualstudio.com/items?itemName=jonathan-yeung.mark-sharp). 15 | 16 | ### Launching Mark Sharp 17 | 18 | There are several ways to launch the Mark Sharp editor: 19 | 20 | 1. In the [Explorer](https://code.visualstudio.com/docs/getstarted/userinterface#_explorer) view, **right click** on a Markdown file > `Open With...` > `Mark Sharp`. 21 | 2. When a markdown file is open in VS Code's default editor, run the command `Mark Sharp: Switch Editor Mode` from the [command palette](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette) or by clicking the **M→** icon on the top right in the editor title bar. 22 | 23 | > _When you edit a markdown file with Mark Sharp, **your existing document layout may be altered**. It is recommended to back up your documents with a version control system like Git or another method of your choice._ 24 | 25 | ### Editing Markdown files 26 | 27 | - Use familiar markdown syntax to create Markdown elements. For example, typing '#' at the beginning of a line will create an H1 header, or surrounding a word with '*' will bold it. 28 | - Type '/' to bring up a slash command menu to quickly insert markdown elements such as lists, tables, images, and diagrams. 29 | - Use the command `Mark Sharp: Switch Editor Mode` to switch between Mark Sharp and the built-in VS Code Editor, while maintaining your cursor position so that you can continue working without losing your context. 30 | 31 | For a complete guide, see the [in depth user guide](./user-guide.md). 32 | 33 | ## Mark Sharp Premium 34 | 35 | Mark Sharp works out of the box as a fully functioning Markdown renderer and supports the basics for editing Markdown files. To unlock rich editing features and to support the continued development of Mark Sharp, please see [purchasing a license](./licensing-and-activation.md). 36 | 37 | Before using Mark Sharp, please read the [End User License Agreement](https://www.marksharp.co/eula), the [Privacy Policy](https://www.marksharp.co/privacy-policy), and the [Telemetry Notice](./telemetry.md). 38 | 39 | ## Acknowledgements 40 | 41 | Mark Sharp would not be possible without the contributions of the open source community. For a full list of third-party libraries and their authors, please see [Acknowledgements](./acknowledgements.md). Thank you for making Mark Sharp possible! 42 | 43 | And lastly, thank you to everyone who has supported Mark Sharp, especially those who have helped with testing, filed bugs, and made feature suggestions! This editor is made for you and would not be possible without your help. -------------------------------------------------------------------------------- /acknowledgements.md: -------------------------------------------------------------------------------- 1 | ## Acknowledgements 2 | 3 | We would like to acknowledge the use of the following third-party libraries listed below. Mark Sharp would not be possible without these valuable resources. 4 | 5 | ### Babel 6 | 7 | Copyright (c) 2014-present Sebastian McKenzie and other contributors 8 | 9 | [MIT License](https://github.com/babel/babel/blob/main/LICENSE) 10 | 11 | ### Fluent UI 12 | 13 | Copyright (c) Microsoft Corporation 14 | 15 | [MIT License](https://github.com/microsoft/fluentui/blob/master/LICENSE) 16 | 17 | ### react-refresh-webpack-plugin 18 | 19 | Copyright (c) 2019 Michael Mok 20 | 21 | [MIT License](https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/LICENSE) 22 | 23 | ### svgr 24 | 25 | Copyright 2017 Smooth Code 26 | 27 | [MIT License](https://github.com/gregberge/svgr/blob/main/LICENSE) 28 | 29 | ### bfj 30 | 31 | Copyright © 2015, 2016 Phil Booth 32 | 33 | [MIT License](https://gitlab.com/philbooth/bfj/-/blob/master/COPYING) 34 | 35 | ### camelcase 36 | 37 | Copyright (c) Sindre Sorhus (https://sindresorhus.com) 38 | 39 | [MIT License](https://github.com/sindresorhus/camelcase?tab=MIT-1-ov-file#readme) 40 | 41 | ### case-sensitive-paths-webpack-plugin 42 | 43 | Copyright (c) 2018 Michael Pratt 44 | 45 | [MIT License](https://github.com/Urthen/case-sensitive-paths-webpack-plugin?tab=MIT-1-ov-file#) 46 | 47 | ### tinycolor2 48 | 49 | Copyright (c), Brian Grinstead, http://briangrinstead.com 50 | 51 | [MIT License](https://github.com/bgrins/TinyColor/blob/master/LICENSE) 52 | 53 | ### diff 54 | 55 | Copyright (c) 2009-2015, Kevin Decker 56 | 57 | [BSD 3 License](https://github.com/kpdecker/jsdiff?tab=BSD-3-Clause-1-ov-file#readme) 58 | 59 | ### dotenv 60 | 61 | Copyright (c) 2015, Scott Motte 62 | 63 | [BSD 2 License](https://github.com/motdotla/dotenv?tab=BSD-2-Clause-1-ov-file#readme) 64 | 65 | ### eslint 66 | 67 | Copyright OpenJS Foundation and other contributors, 68 | 69 | [MIT License](https://github.com/eslint/eslint/blob/main/LICENSE) 70 | 71 | ### fs-extra 72 | 73 | Copyright (c) 2011-2024 JP Richardson 74 | 75 | [MIT License](https://github.com/jprichardson/node-fs-extra?tab=MIT-1-ov-file) 76 | 77 | ### immer 78 | 79 | Copyright (c) 2017 Michel Weststrate 80 | 81 | [MIT License](https://github.com/immerjs/immer/blob/main/LICENSE) 82 | 83 | ### Katex 84 | 85 | Copyright (c) 2013-2020 Khan Academy and other contributors 86 | 87 | [MIT License](https://github.com/KaTeX/KaTeX/blob/main/LICENSE) 88 | 89 | ### Lexical 90 | 91 | Copyright (c) Meta Platforms, Inc. and affiliates. 92 | 93 | [MIT License](https://github.com/facebook/lexical/blob/main/LICENSE) 94 | 95 | ### Luxon 96 | 97 | Copyright 2019 JS Foundation and other contributors 98 | 99 | [MIT License](https://github.com/moment/luxon/blob/master/LICENSE.md) 100 | 101 | ### Mermaid JS 102 | 103 | Copyright (c) 2014 - 2022 Knut Sveidqvist 104 | 105 | [MIT License](https://github.com/mermaid-js/mermaid/blob/develop/LICENSE) 106 | 107 | ### nunjucks 108 | 109 | Copyright (c) 2012-2015, James Long 110 | 111 | [BSD 2 License](https://github.com/mozilla/nunjucks?tab=BSD-2-Clause-1-ov-file) 112 | 113 | ### postcss 114 | 115 | Copyright 2013 Andrey Sitnik 116 | 117 | [MIT License](https://github.com/postcss/postcss?tab=MIT-1-ov-file) 118 | 119 | ### prismjs 120 | 121 | Copyright (c) 2012 Lea Verou 122 | 123 | [MIT License](https://github.com/PrismJS/prism/blob/master/LICENSE) 124 | 125 | ### React 126 | 127 | Copyright (c) Meta Platforms, Inc. and affiliates. 128 | 129 | [MIT License](https://github.com/facebook/react/blob/main/LICENSE) 130 | 131 | ### browserify 132 | 133 | Copyright (c) 2012 James Halliday 134 | 135 | [MIT License](https://github.com/browserify/resolve?tab=MIT-1-ov-file#readme) 136 | 137 | ### semver 138 | 139 | Copyright (c) 2013-2023 Max Hauser, Jeff Walker 140 | 141 | [MIT License](https://github.com/maxhauser/semver/blob/master/License.txt) 142 | 143 | ### Typescript 144 | 145 | [Apache 2 License](https://github.com/microsoft/TypeScript/blob/main/LICENSE.txt) 146 | 147 | ### web-vitals 148 | 149 | [Apache 2 License](https://github.com/GoogleChrome/web-vitals) 150 | 151 | ### Webpack 152 | 153 | Copyright JS Foundation and other contributors 154 | 155 | [MIT License](https://webpack.js.org/license/) 156 | 157 | ### YAML Parser 158 | 159 | Copyright Eemeli Aro 160 | 161 | [ISC License](https://github.com/eemeli/yaml?tab=ISC-1-ov-file#readme) 162 | 163 | ### glob 164 | 165 | Copyright (c) 2009-2023 Isaac Z. Schlueter and Contributors 166 | 167 | [ISC License](https://github.com/isaacs/node-glob?tab=ISC-1-ov-file#readme) 168 | 169 | ### mocha 170 | 171 | Copyright (c) 2011-2022 OpenJS Foundation and contributors, https://openjsf.org 172 | 173 | [MIT License](https://github.com/mochajs/mocha/blob/master/LICENSE) 174 | 175 | ### ts-loader 176 | 177 | Copyright (c) 2015-present TypeStrong 178 | 179 | [MIT License](https://github.com/TypeStrong/ts-loader?tab=MIT-1-ov-file#readme) 180 | 181 | ### axios 182 | 183 | Copyright (c) 2014-present Matt Zabriskie & Collaborators 184 | 185 | [MIT License](https://github.com/axios/axios/blob/v1.x/LICENSE) 186 | 187 | ### reflect-metadata 188 | 189 | [Apache 2 License](https://github.com/rbuckton/reflect-metadata?tab=Apache-2.0-1-ov-file#readme) 190 | 191 | ### tsyringe 192 | 193 | Copyright (c) Microsoft Corporation. All rights reserved. 194 | 195 | [MIT License](https://github.com/microsoft/tsyringe?tab=MIT-1-ov-file#readme) 196 | -------------------------------------------------------------------------------- /user-guide.md: -------------------------------------------------------------------------------- 1 | # Mark Sharp User Guide 2 | 3 | > _Some features mentioned in this guide are only available with a Mark Sharp premium license._ 4 | 5 | ## Installation 6 | 7 | See [Quick Start](./README.md#Quick_Start). 8 | 9 | ## Basics 10 | 11 | ### Opening a Markdown file with Mark Sharp 12 | 13 | There are several ways to launch the Mark Sharp editor: 14 | 15 | 1. In the [Explorer](https://code.visualstudio.com/docs/getstarted/userinterface#_explorer) view, **right click** on a Markdown file ( with a `.md` or `.markdown` file extension) > `Open With...` > `Mark Sharp`. 16 | 2. When a markdown file is open in VS Code's default editor, run the command `Mark Sharp: Switch Editor Mode` from the [command palette](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette). 17 | 18 | ### Slash Commands 19 | 20 | Trigger slash commands by typing '/' while the cursor is at an empty space. There are markdown generation commands available for things like tables, mermaid diagrams, lists, and headers. Some options are listed below: 21 | 22 | | Slash Command | Description | 23 | | ------------- | ------------------------------------------------------------------------------------------------ | 24 | | /list | Insert a new list. You can specify between a numbered list, a bulleted list, or a checked list. | 25 | | /h1 | Insert an H1 header. You can insert headers of levels 1-6 | 26 | | /5x2 | [Premium Feature] Insert a table with 5 rows, 2 columns. | 27 | | /mermaid | [Premium Feature] Inserts a mermaid diagram, optionally with a pre-configured template | 28 | | /image | [Premium Feature] Insert an image into your document | 29 | | /footnote | [Premium Feature] Insert a footnote into your document. The footnote anchor will auto-increment. | 30 | | /html | [Premium Feature] Insert an HTML block using one of the preset templates. | 31 | 32 | ### Editor Switching 33 | 34 | The command `Mark Sharp: Switch Editor Mode` allows you to quickly switch between Mark Sharp and the built-in editor so that you can take advantage of the viewing/editing benefits of each mode. This command will place the cursor at the same position so that you can continue working without losing your context. 35 | 36 | This is assigned a default shortcut of `cmd+k y` for Mac or `ctrl+k y` for Windows. This shortcut can be modified to a more convenient key combination of your choosing. 37 | 38 | > _Note: if a document hasn't yet been edited by Mark Sharp, cursor placement may be inaccurate as the markdown definition may be in a state that Mark Sharp doesn't expect._ 39 | 40 | ## User Interface 41 | 42 | ### Outline Panel 43 | 44 | The outline panel can be found in the [Explorer view](https://code.visualstudio.com/docs/getstarted/userinterface#_explorer-view) when a Mark Sharp document is open. The view displays the headers in the current active Mark Sharp document. 45 | 46 | - Click on a header to scroll to its position in the page 47 | - Hover the mouse over a header to get a quick pop-up preview of the contents at that header 48 | 49 | You can re-arrange the position of the outline panel as you like, see [Custom Layout](https://code.visualstudio.com/docs/editor/custom-layout). 50 | 51 | _Note: the outline panel is only displayed when a Mark Sharp editor is in focus._ 52 | 53 | ![image.png](https://mark-sharp-public.s3.us-west-2.amazonaws.com/images/outline-view.png) 54 | 55 | ### Collapsible Headers 56 | 57 | For each header element, there's a collapsible chevron that will appear if you mouse over the area immediately to the left of the header. Click the chevron to toggle the child contents of that header. The fold states will sync up with the VSCode editor if you use the `Mark Sharp: Switch Editor Mode` command. 58 | 59 | ### Presentation Mode 60 | 61 | _Premium Feature_ 62 | 63 | When presentation mode is enabled, Mark Sharp enters a read-only state and streamlines the appearance of the document. This mode is useful when you're trying to present or just read your documents without editing. 64 | 65 | To switch between presentation mode and edit mode, you can either: 66 | 67 | 1. Click on the M# entry in the [status bar](https://code.visualstudio.com/api/ux-guidelines/status-bar) at the bottom of the VS Code window. When not in presentation mode, the status bar item will display `M#: Edit Mode`. 68 | 2. Run the VS Code Command `Mark Sharp: Toggle Presentation Mode`. You can assign a keyboard shortcut of your choice to this command, which makes switching between presentation mode and edit mode a breeze. 69 | 70 | When in presentation mode, the following behaviors change: 71 | 72 | - The document is no longer editable. 73 | - The light-gray frontmatter text is no longer visible. The title and created header will still be displayed if present in the frontmatter fields. 74 | - Clicking on markdown elements will no longer trigger their unformatted state - for example, clicking on **bold** text won't show its '*' tags, clicking on a header won't show '#' tags. 75 | - Similarly, clicking on an image won't show its markdown definition below the image 76 | - Clicking on a Katex element will not expand to its markdown definition. 77 | - Clicking on link, wikilinks, and footnote references will now directly navigate you to the destination in a single-click. 78 | - Mermaid diagrams will display in 'diagram-only' mode. 79 | - HTML blocks will render according to their HTML definition. Clicking on the block will not reveal the HTML editor. 80 | - Hovering on the edges of a table will not display the '+' signs to add columns and rows. 81 | - The draggable 6-dot icon on the left side no longer shows up. 82 | 83 | You can use the status bar as a visual indicator of the mode that you're in. When in presentation mode, the status bar item will be in yellow as a reminder that the document cannot be edited. 84 | 85 | ![image.png](https://mark-sharp-public.s3.us-west-2.amazonaws.com/images/presentation-mode.png) 86 | 87 | ### Draggable Blocks 88 | 89 | _Premium Feature_ 90 | 91 | When you mouse over any element in the document, 6 dots will appear in the left column. You can drag elements to reposition them. 92 | 93 | ### Right to Left Text Directionality 94 | 95 | Mark Sharp has built-in support for editing Markdown in right-to-left (RTL) mode, which is useful when creating documents in RTL languages such as Arabic, Hebrew, and Persian. When RTL mode is enabled, the text direction will flow from right to left, and the text alignment will be right-aligned. RTL mode can be enabled in several ways: 96 | 97 | 1. When Mark Sharp is open, run the command `Mark Sharp: Change Text Directionality` to toggle between RTL and LTR modes. 98 | 2. In the status bar on the bottom right, click on 'LTR' (or 'RTL') to toggle between the two modes. 99 | 100 | ## Markdown Features 101 | 102 | Markdown elements can be created using familiar Markdown syntax. For example, you can surround a word with `_` to italicize it, or type `#` at the beginning of a line to create an H1 Header. 103 | 104 | ### Code Blocks 105 | 106 | Type three ``` to create a code block, or use the slash command `/code`. You can add a language to the code block like "```javascript " to get syntax highlighting. 107 | 108 | - If you're on the last line of a code block, `Shift+Enter` will exit the code block and add a new paragraph below. 109 | - If you're on the first line of a code block and the code block is at the top of the page, `Up Arrow` will add a new line above it. 110 | - Mark Sharp supports syntax highlighting on a limited set of languages in code blocks. 111 | 112 | ### Mermaid Diagrams 113 | 114 | _Premium Feature_ 115 | 116 | Mark Sharp supports [Mermaid diagrams](https://mermaid.js.org/). To create a mermaid diagram, either use a slash command "/mermaid" or type ```mermaid at the beginning of a line. 117 | 118 | #### Customizing Diagram Color Themes 119 | 120 | By default, the mermaid color theme is derived from your current VSCode color theme. If you want to use Mermaid's built in themes instead, set the `markSharp.mermaidTheme` setting to `useMermaidDefaults`. In this mode, If your VS Code theme is light, the default theme is used; if dark, 'dark' is used (see [Mermaid's documentation](https://mermaid.js.org/config/theming.html#available-themes) for more details). 121 | 122 | Futhermore, you can adjust the theme on an individual diagram by including a frontmatter block before the diagram defintion. For example: 123 | 124 | ```mermaid 125 | --- 126 | config: 127 | theme: 'base' 128 | themeVariables: 129 | primaryColor: '#BB2528' 130 | primaryTextColor: '#fff' 131 | primaryBorderColor: '#7C0000' 132 | lineColor: '#F8B229' 133 | secondaryColor: '#006100' 134 | tertiaryColor: '#fff' 135 | --- 136 | graph TD 137 | A[Christmas] -->|Get money| B(Go shopping) 138 | B --> C{Let me think} 139 | B --> G[/Another/] 140 | C ==>|One| D[Laptop] 141 | C -->|Two| E[iPhone] 142 | C -->|Three| F[fa:fa-car Car] 143 | subgraph section 144 | C 145 | D 146 | E 147 | F 148 | G 149 | end 150 | ``` 151 | 152 | For details, please refer to Mermaid's [documentation](https://mermaid.js.org/config/theming.html#customizing-themes-with-themevariables). **Note**: if there are any syntax errors in the `init` block, Mermaid's parser will fail silently and the color theme will go back to 'default'. Please double check that your syntax conforms to Mermaid's requirements. 153 | 154 | ### Quote Blocks 155 | 156 | - Create a quote block by typing "> " at the beginning of an empty line. 157 | - Create a [Github-style Alert](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts) by typing `[!NOTE]`, `[!TIP]`, `[!IMPORTANT]`, `[!WARNING]`, or `[!CAUTION]` at the beginning of the first line of quote block. This will change the color block and add an icon corresponding to the alert type. 158 | - Customize the display text of the alert by adding suffix text, for example `> [!TIP] Check this out!`. 159 | 160 | ### Katex 161 | 162 | - Katex blocks and inline equations are supported with `$$` and `$f(x)$` syntax respectively. 163 | 164 | ### Lists 165 | 166 | - Typing "- " or "1. " on a new line will trigger an unordered / ordered list respectively. 167 | - `Enter` on an existing list item will create a new list item. 168 | - `Enter` on a blank list item will outdent one level, or exit the list block if at the top level 169 | - `Backspace` at the beginning of an list item will delete the list item. 170 | - `Shift+Enter` will add a new line to the current list item. 171 | - `Tab` will increase the indentation level, but now with an added restriction that you can only go one level higher than the previous sibling, as Markdown has this restriction. 172 | - `Shift+Tab` will decrease the indentation level. 173 | - Typing `- []` or `- [ ]` will create a check list (same behavior as before). 174 | - You can convert a list type by having the cursor on a list item, and then activate a slash command and selecting your desired list type. 175 | 176 | ### Links 177 | 178 | To create a link, type the display text in [brackets] followed by the address in (parentheses) as per Markdown link syntax. Examples: 179 | 180 | - Markdown link syntax: `[google](https://www.google.com)` 181 | - Raw url: `www.google.com` 182 | 183 | A link can also created by having a URL on the clipboard and then pasting over a text selection - this will create a Markdown link with the selected text as the link text. 184 | 185 | _Note: web url's must be prefixed with either `https://` or `http://`._ 186 | 187 | Local files can also be linked by specifying their path relative to the current file. 188 | 189 | - `[my note](./folder/my-note.md)` 190 | - `[my note](my-note-in-same-folder.md)` 191 | 192 | You can also link to a header within a markdown page by adding a suffix of a `#` character followed by the header name. As per markdown syntax, the header name should be converted to lowercase and spaces replaced with hyphens. 193 | 194 | - `[my note](my-note.md#header-1)` 195 | 196 | Clicking on this link will open `my-note.md` and scroll the document to the header with contents `Header 1`. 197 | 198 | ### Wikilinks 199 | 200 | Wikilinks are also supported for creating links to local files. To create a wikilink, surround the name of the file with double brackets. Including the `.md` file extension is not necessary, but if linking to a non-markdown file, include the file extension. Optionally, an alias can be added after a `|` character that will be displayed when the link is not selected. Examples: 201 | 202 | - `[[my file name]]` 203 | - `[[my file name|alias]]` 204 | - `[[my image.jpg]]` 205 | 206 | In order for a wikilink to resolve, the destination file must be presently opened in the current VS Code folder or workspace. As with regular links, you can optionally add `#header` suffixes to the link path. 207 | 208 | ### Images 209 | 210 | _Premium Feature_ 211 | 212 | There are several ways to add images to your document: 213 | 214 | 1. You can paste an image from your clipboard. 215 | 2. You can also drag and drop an image directly into your document. Note: you **must** hold down `shift` **before** starting the drag and until after the drop. 216 | 3. Using the slash command /image or `Mark Sharp: Insert Image`, you can pick an image from a file picker. 217 | 218 | When an image is put into the editor, you'll be prompted for a path. You can also set the setting `mark-sharp.imagePath` to set a default path and avoid the prompt. 219 | 220 | ### Tables 221 | 222 | _Premium Feature: Tables will render with all versions, but table editing is only available in premium. To edit tables with basic, switch to the VS Code editor._ 223 | 224 | You can generate a table by typing |header1|header2| + `space`. You can also generate a table by using a slash command and entering the desired dimensions, for example `/2x3`. A VS Code command also exists, `Mark Sharp: Insert Table`. 225 | 226 | - Mousing over the bottom or right edges of the table will bring up a '+' sign to add additional rows or columns 227 | - Right clicking on a cell brings up a context menu with options for manipulating the table 228 | - You can click on the top of a column or row to select the entire column or row 229 | 230 | ### HTML Blocks 231 | 232 | HTML blocks (as defined by the Github Flavored Markdown Spec [Section 4.6](https://github.github.com/gfm/#html-blocks)) will be parsed during document import and exported as a contiguous block. 233 | 234 | - _Premium Feature:_ Create HTML blocks quickly with a new slash command entry, `/HTML`. Templates have been added to quickly generate a generic block, a centered `
`, and a resized ``. 235 | - Double click on an HTML block to see and edit the HTML definition. 236 | - If the HTML definition renders into an invisible element (such as an empty div), the HTML definition will be shown as a placeholder. This is to ensure that the HTML block can still be clicked for further editing. In presentation mode, such HTML definitions will not render any content. 237 | - If the HTML definition is changed such that it no longer forms a valid HTML block, then the block will be reverted to regular text once the cursor focus moves out of the block. 238 | 239 | ### Footnotes 240 | 241 | You can generate footnotes with a slash command `/footnote` or with the VS Code command `Mark Sharp: Insert Footnote`. Footnotes generated this way will automatically increment, and the reference text will be placed at the bottom of the document. Furthermore, if a URL is detected on the clipboard, then it'll be used as the footnote text. (This behavior may later prove to be too weird and be removed). ou can also generate a footnote by typing out a matching anchor/reference pair with `[^1]` and on a separate line typing `[^1]: foo`. 242 | 243 | ### Frontmatter 244 | 245 | Typing "---" on the first line of a document will generate a [frontmatter](https://jekyllrb.com/docs/front-matter/) block. Clicking on the faint 'Frontmatter' text at the top of the document will expand the frontmatter for editing; clicking elsewhere in the document will hide it. 246 | 247 | Mark Sharp will also format a Header block in an H1 title for a frontmatter field named `title` and a creation date subtext for a field called `created`. 248 | 249 | ## VS Code Commands 250 | 251 | Mark Sharp contributes the following VS Code commands. Many of the editing commands are mirrors of options in the slash command menu. 252 | 253 | | Command | Description | 254 | | -------------------------------------- | ---------------------------------------------------------------------------------------------------- | 255 | | Mark Sharp: Switch Editor Mode | Switches between Mark Sharp and the default VS Code editor, maintaining cursor position. | 256 | | Mark Sharp: Insert Mermaid Diagram | [Premium Feature] Inserts a Mermaid diagram at the current cursor position. A template can be optionally chosen. | 257 | | Mark Sharp: Insert Table | [Premium Feature] Inserts a table; dimensions can be specified | 258 | | Mark Sharp: Insert Image | [Premium Feature] Insert an image | 259 | | Mark Sharp: Insert HTML Block | [Premium Feature] Inserts an HTML block with one of the preset templates | 260 | | Mark Sharp: Insert Footnote | [Premium Feature] Inserts a footnote at the current cursor position. | 261 | | Mark Sharp: Fold All | Folds all headers in the Mark Sharp editor. Analogous to the built-in 'Fold All' command. | 262 | | Mark Sharp: Unfold All | Unfolds all headers in the Mark Sharp editor. Analogous to the built-in 'Unfold All' command. | 263 | | Mark Sharp: Manage License | Opens the licensing page where you can purchase a license, activate a license key, or deactivate your license. | 264 | | Mark Sharp: Toggle Presentation Mode | [Premium Feature] Toggles between editing mode and presentation mode. | 265 | | Mark Sharp: Increase Font Size | Scales up the font size in the editor. This command will alter the value in the setting `mark-sharp.display.fontSize` | 266 | | Mark Sharp: Decrease Font Size | Scales down the font size. | 267 | | Mark Sharp: Change Text Directionality | Toggles between Right-To-Left text mode and Left-To-Right text mode. | 268 | 269 | ## Settings 270 | 271 | ### Setting Mark Sharp as the default Markdown editor 272 | 273 | In the [Explorer](https://code.visualstudio.com/docs/getstarted/userinterface#_explorer) view, **right click** on a Markdown file ( with a `.md` or `.markdown` file extension) > `Open With...` > `Configure Default Editor for '.md'...` > `Mark Sharp`. 274 | 275 | If you want Mark Sharp as your default editor, but you _don't_ want it when viewing diffs of Markdown files, you can make the following adjustments in your user settings (`> Preferences: Open User Settings (JSON)`): 276 | 277 | ```json 278 | "workbench.editorAssociations": { 279 | "{git}:/**/*.{md}": "default", 280 | "*.md": "msharp.customEditor" 281 | } 282 | ``` 283 | 284 | Adding the line `"{git}:/**/*.{md}": "default"` will use the default editor when viewing diffs of Markdown files. 285 | 286 | ### Extension Settings 287 | 288 | Manage Mark Sharp settings with [VS Code User and Workspace Settings](https://code.visualstudio.com/docs/getstarted/settings) - please refer to this documentation on how to adjust settings in the VS Code UI. 289 | 290 | | Setting | Description | Default | 291 | | ----------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | 292 | | mark-sharp.imagePath | The path to the images folder relative to the workspace root. When set, images added to docs will be copied to this folder; if blank, then you will be prompted for a path each time an image is added. | "" | 293 | | mark-sharp.display.editorTheme | [*Premium Feature*] Adjust the color theme of the Mark Sharp editor. This setting only affects the premium version of Mark Sharp - the basic version always uses default light/dark themes depending on the current theme type. | vscode | 294 | | mark-sharp.display.mermaidTheme | [*Premium Feature*] Adjust the color theming of Mermaid Diagrams. | editorTheme | 295 | | mark-sharp.display.fontSize | Adjust the font size of the editor so that text can be scaled independently from the VS Code zoom level. The valid range is 6 - 100. | 14 | 296 | | mark-sharp.display.fontFamily | [*Premium Feature*] Adjust the font family used in the Mark Sharp editor. Use a comma-separated list to specify multiple fonts (just like the [font-family CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#examples)). Example: `"Roboto", sans-serif` | Defaults to the font families of VS Code. | 297 | | mark-sharp.formatting.bulletListMarker | The type of marker to use for bullet lists when saving to the markdown file. (`-`, `*`, `+`) | The marker parsed from the markdown file is used when importing, and the typed marker is used for new lists created when editing. | 298 | | mark-sharp.formatting.orderedListDelimiter | The delimiter to use for ordered lists when saving the document back to the markdown file. (Either `1.` or `1)`) | The delimiter parsed from the markdown file is used when importing, and the typed delimiter is used for new lists when editing." | 299 | | mark-sharp.formatting.orderedListIncrementStyle | Increment numbers in ordered lists or always use 1's when saving the document back to the markdown file. | The style parsed from the markdown file is used when importing, and incrementing numbers are always used for new lists when editing. This setting does not affect the rendered markdown; increasing numbers will always be displayed. | 300 | | mark-sharp.formatting.tableAlignment | Set how tables are arranged when saving the document back to the markdown file. Either align columns or condense line width. | Align columns | 301 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## 1.9.1 4 | 5 | - Inline equations will now form when the characters adjacent to the `$` signs are not spaces. This prevents accidental parsing of dollar signs to inline equations, such as in `$1, $2` . 6 | - Fixes an issue where images with no alt-text specified would not render. 7 | - Allows code blocks to be specified by more than 3 backticks or tildas and preserves the length when saving the document. 8 | 9 | ## 1.9.0 10 | 11 | **Behavior Change** - pressing 'Up Arrow' at the top of a document will no longer create new lines at the top of the document. To add new lines, place the cursor at the beginning of the first line, and hit enter. This can also be done within block elements like code blocks, html blocks, and tables - with the cursor on the top line of the block element, hit the up arrow and a cursor will appear ahead of the block. Hitting enter in this state will add a new line at the top of the document. 12 | 13 | ### Code Block Improvements 14 | 15 | - Fixes an issue where line numbers are incorrect when a code highlight segment spans multiple lines. 16 | - Fixes an issue where the document viewport would sometimes jump when the mouse entered a code block. 17 | 18 | ### Equation Improvements 19 | 20 | - Revamps the functionality of inline and block equations; arrow key navigation into and out of equation components is more natural. 21 | - Updates the styling to match other block and inline elements. 22 | - Adds a slash command to create equation blocks. 23 | 24 | ### Other Fixes and Changes 25 | 26 | - Fixes an issue for basic mode where editing is blocked if the document contains a table. 27 | - Fixes an issue with importing emphasis elements (**) when the leading word is a single letter. 28 | - Fixes a crash in "btoa" that would sometimes affect documents with equations or images. 29 | - Fixes an import crash when brackets are part of a link label. 30 | - Improves parsing behaviors for quote blocks, particularly with nested quote blocks and blocks that don't have a leading space after the '>' delimiter. 31 | - Fixes some positioning offset problems with the chevrons in the sidebar next to headers. 32 | - Updates Mermaid version from `11.9.0` to `11.11.0`. 33 | 34 | ## 1.8.3 35 | 36 | - Allows activation of Mark Sharp Premium in a Linux code server environment 37 | 38 | ## 1.8.2 39 | 40 | - Fixes an issue where Mermaid diagrams with frontmatter would not render; updates the mermaid version from `11.6.0` to `11.9.0`. For details, please see the [mermaid-js changelog](https://github.com/mermaid-js/mermaid/releases). 41 | - Mark Sharp will no longer override your `editor.defaultFormatter` and `editor.formatOnSave` VSCode settings; these can now be set to values of your choosing without affecting Mark Sharp's functionality. 42 | - Fixes an issue where copying partial text from a header and pasting it would erroneously create a new header 43 | - This release makes various improvements to Markdown parsing during import that improve stability and alignment with the Github Flavored Markdown spec: 44 | - Fixes an issue where footnotes with formatted text would prevent certain documents from loading. 45 | - Improved handling of links within formatting elements 46 | - Improved handling of inline code spans taking precedence over other formatting elements 47 | - Improved parsing of nested formatting elements 48 | - Support for using multiple backticks` for inline code spans. 49 | 50 | ## 1.8.1 51 | 52 | - Fixes the 'Current editor state is null after VSCode Ack.' crash that would sporadically occur when editing longer documents. 53 | - Upgrades Mermaid version from `11.4.0` to `11.6.0`. For details, please see the [mermaid-js changelog](https://github.com/mermaid-js/mermaid/releases). 54 | - [_Internal_] Upgrades version of core editor engine. 55 | 56 | ## 1.8.0 57 | 58 | ### Formatting Settings 59 | 60 | This version introduces formatting settings, which allow for more control over the markdown style that is exported back to the underlying file. 61 | 62 | - For ordered lists, change the `orderedListDelimiter` setting to alter between `1.` and `1)`. Change the `orderedListIncrementStyle` to have the list numbers be incrementing or always be `1`. 63 | - For unordered list, change `bulletListMarker` to switch the marker between `-`, `*`, and `+`. 64 | - **Behavior Change** - the default option for the above settings is `asTyped` - in this mode, the style will match the existing style as imported from the original document; when typing in the Mark Sharp editor, the export style will match the user's input. 65 | - For tables, `tableAlignment` can be set to `alignColumns` to have columns delimiters aligned or `condensed` to have the line widths be as short as possible. 66 | 67 | These settings can be adjusted through [VS Code's settings](https://code.visualstudio.com/docs/configure/settings#_settings-editor). Search for settings beginning with `Mark-Sharp>Formatting`. For more details, see the [user guide](https://github.com/jonathanyeung/mark-sharp/blob/main/user-guide.md#extension-settings). More export settings will be added in subsequent versions. 68 | 69 | ### Other improvements and fixes 70 | 71 | - **Behavior Change** - if a url is copied to clipboard and then pasted over a portion of selected text, a markdown link will be generated with the selected text as the link text. 72 | - **Critical Fix** - fixes an issue that caused document state skew when certain elements including horizontal rules, HTML blocks, tables, and images were deleted when the entire block element was selected. 73 | - Fixes an issue where formatted elements such as links or bolded text would disappear when converted to a header. 74 | - Fixes a crash that would occur when manipulating footnote anchors. 75 | - Improves parsing robustness when creating check list items. 76 | 77 | ## 1.7.2 78 | 79 | [**Github-style Alerts**](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts) are now supported. 80 | 81 | - Adding `[!NOTE]`, `[!TIP]`, `[!IMPORTANT]`, `[!WARNING]`, or `[!CAUTION]` at the start of a quote block will stylize the block with a particular color and icon that can further emphasize the contents for the reader. 82 | - Customize the display text of the alert by adding suffix text, for example `> [!TIP] Check this out!`. 83 | - **Premium Feature**: quickly add an alert to your document with added slash commands. These can be found in the subcategories under 'Quote Block'. 84 | 85 | General Fixes: 86 | 87 | - Improves parsing of code blocks. Code blocks with various leading spaces are now parsed in accordance with the Github Flavored Markdown spec. Code blocks with tilde (`~`) fences and also now parsed correctly. 88 | 89 | ## 1.7.1 90 | 91 | - Fixes line numbers in code blocks for wrapped lines. 92 | - Mitigates a parsing issue with multiple image elements on the same line that led to a 'Unhandled scenario: image definition spans multiple nodes' error message and prevented the document from loading. 93 | - Fixes some precedence issues with inline code spans. Creating a code span around existing elements such as links or bolded text will revert the inner formatting to plain text. 94 | 95 | ## 1.7.0 96 | 97 | - Revamp of Images: 98 | - Clicking on an image or focusing on it with the cursor will now show the markdown definition text inline, rather than in a separate text box. This makes the image editing experience closer to that of editing a markdown document. 99 | - Multiple images on the same line will now properly render side-by-side, provided the window has enough horizontal space. 100 | - **Breaking Change**: When images on the clipboard are pasted sequentially, the image files will be saved to the workspace with a `image-1.jpg`, `image-2.jpg` format instead of `image (1).jpg`. This formatting is easier to work with in Markdown links. 101 | - Fixes some parsing issues of wikilinks when there are multiple aliased wikilinks on the same line. 102 | - Fixes box shadow styling issues in tables when the table cell editor is focused. 103 | - Fixes an export issue with checked list items that have child elements that would cause child elements such as code blocks to get parsed incorrectly when re-opening the Mark Sharp editor. 104 | 105 | ## 1.6.2 106 | 107 | - The `Mark Sharp: Split View` context menu on Explorer items now only shows up when right clicking on Markdown files and has been moved down the menu order. 108 | - Fixes an issue when parsing wikilinks that have multiple '|' characters in them. 109 | - Fixes an issue when parsing multiple images on a single line. 110 | 111 | ## 1.6.1 112 | 113 | - Upgrades the Mermaid version from `10.9.1` to `11.4.0`. For details, please see the [mermaid-js changelog](https://github.com/mermaid-js/mermaid/releases). 114 | - Improves reliability of cursor position placement when switching editor modes. 115 | - Fixes parsing issues with list indentation level when the lists are indented by tabs. 116 | - Expands the supported language set for syntax highlight in code blocks. 117 | 118 | ## 1.6.0 119 | 120 | ### Right to Left Text Mode 121 | 122 | This version introduces a right-to-left (RTL) text mode to improve the experience of authoring Markdown documents in RTL languages, such as Arabic, Hebrew, and Persian. When RTL mode is enabled, the text direction will flow from right to left, and the text alignment will be right-aligned. You can toggle RTL mode in several ways: 123 | 124 | 1. When Mark Sharp is open, run the command `Mark Sharp: Change Text Directionality`. 125 | 2. In the status bar on the bottom right, click on 'LTR' (or 'RTL') to toggle between the two modes. 126 | 127 | ### Fixes 128 | 129 | - Fixes an issue where the prompt to select a destination path for an image being pasted from the clipboard would appear multiple times. 130 | - Fixes an issue that prevented images with spaces in the path name while inside a table or HTML block from properly resolving. 131 | 132 | ## 1.5.1 133 | 134 | - Adds a setting for adjusting the font size, `mark-sharp.display.fontSize`. This setting can also be adjusted through two convenience commands when an M# document is open, `mark-sharp.increase-font-size` and `mark-sharp.decrease-font-size` so that keyboard shorcuts can be added to quickly scale the text. 135 | - **Premium feature** - premium users can now customize the fonts in the editor with the setting `mark-sharp.display.fontFamily`. 136 | - Fixes an issue where using relative image paths would cause the image to not render 137 | - Fixes an issue where adding multiple images from the clipboard would overwrite existing files - subsequent files will now incrementing suffixes in the file name. 138 | - Fixes an issue for image paths that had parentheses in the file name. 139 | - Fixes an issue when pasting text inside the image definition text box. 140 | 141 | ## 1.5.0 142 | 143 | **Breaking Change**: The setting `mark-sharp.mermaidTheme` has been renamed to `mark-sharp.display.mermaidTheme` - if you had previously changed this setting, then you'll need to set it again (run `> Preferences: Open User Settings`, search for "Mark Sharp"). 144 | 145 | ### Styling Updates 146 | 147 | - A default dark theme is now available to all users. To get editor colors matching those of your favorite VS Code theme, please see [Mark Sharp Premium](https://github.com/jonathanyeung/mark-sharp/blob/main/licensing-and-activation.md). 148 | - **Premium Feature:** Premium users can now switch the theme of their Mark Sharp editor windows among the default light, default dark, and VS Code themes with the `Mark Sharp: Editor Color Theme` command. This command will update the setting `mark-sharp.display.editorTheme`. 149 | - Improves the page layout for docs with wide tables - text within cells will now be wrapped to better fit the screen dimensions. For tables that have a lot of columns, a horizontal scroll bar will appear for the table element. Furthermore, other elements in the document will now wrap properly instead of running the width of the table. 150 | - Fixes a white screen flicker issue that would occur when opening a document in dark mode. 151 | - Cleans up styling in various areas. 152 | 153 | ### Critical Windows Fix 154 | 155 | - Fixes critical text skew issues affecting Windows users (particularly, documents with CRLF line endings) that would sometimes cause characters to move around or line breaks to be inserted in incorrect places. 156 | 157 | ### Other fixes 158 | 159 | - Fixes an initialization error when using Mark Sharp on the web (vscode.dev). 160 | - Improves editing performance for documents with large tables. 161 | - Fixes an issue where adding new line items to an existing list would sometimes add erroneous line breaks. 162 | - Fixes an error when importing a link within a formatted text block. 163 | 164 | ## 1.4.1 165 | 166 | - Fixes an issue that prevented copying/pasting of HTML blocks 167 | - Fixes an issue where deleting a formatted node sometimes led to a webview error (Lexical Error Code 113). 168 | 169 | ## 1.4.0 170 | 171 | ### HTML Blocks 172 | 173 | HTML blocks are now supported (see the Github Flavored Markdown Spec [Section 4.6](https://github.github.com/gfm/#html-blocks)). 174 | 175 | - HTML blocks will now be parsed during document import and exported as a contiguous block. 176 | - Double click on an HTML block to see and edit the HTML definition. 177 | - _Premium Feature:_ Create HTML blocks quickly with a new slash command entry, `/HTML`. Templates have been added to quickly generate a generic block, a centered `
`, and a resized ``. 178 | 179 | **Limitations**: 180 | 181 | - Inline HTML elements are not yet fully supported. 182 | - Interleaving Markdown syntax with HTML code is not yet supported (for example, with a `
` block) - this is technically not an HTML block as per the GFW spec. 183 | 184 | ### Other Fixes 185 | 186 | - Images in tables will now render properly. 187 | - Fixes code block parsing issues with documents using CRLF line endings (this primarily affects Windows users). 188 | - Fixes `
` imports in table cells. 189 | 190 | ## 1.3.2 191 | 192 | - Mermaid Improvements 193 | - Improves readability with the color theming of Mermaid diagrams. 194 | - Adds a new setting `mark-sharp.mermaidTheme` that allows you to use Mermaid's default themes. See the [user guide](https://github.com/jonathanyeung/mark-sharp/blob/main/user-guide.md#mermaid-diagrams) for more details. 195 | - Fixes an issue where the diagram would disappear when making modifications to the diagram definition that wouldn't alter the diagram appearance (i.e., adding a comment). 196 | - Upgrades the Mermaid library version to `10.9.1`. 197 | - **Behavior Change**: the outline view will no longer auto-minimize even a Mark Sharp editor goes out of focus. This change also fixes an issue where the outline view would sometimes be hidden even when a Mark Sharp editor was in focus. 198 | - Adds a 'Report' button to the notification popup when a webview error is encountered. Clicking on the button will take you to the [bug reporting page](https://github.com/jonathanyeung/mark-sharp/issues/new?assignees=&labels=&projects=&template=bug_report.yaml) of the project Github. 199 | - Fixes an issue when deleting the first character in a formatting element that would cause the editor to freeze. 200 | - Fixes an issue when pasting text that was copied from inside a formatting element. 201 | - Fixes an issue with cursor navigation when pressing Home/End with an Equation element at the start or end of a line, respectively. 202 | - Fixes an issue when a link surrounded by formatting elements would lose its formatting on import. 203 | - Fixes an issue where the cursor would jump to the top the document when switching focus back into VS Code and hovering over a code block. 204 | - Fixes an issue where code block menu details would be visible when the page first loads. 205 | 206 | ## 1.3.1 207 | 208 | - Fixes a regression from `1.3.0` where typing text in a new paragraph created from clicking at the bottom of the document below a table or code block would lead to document skew on export. 209 | - Fixes some code highlighting issues for certain languages, including HTML and XML. 210 | - Fixes an issue where code blocks would still be editable in presentation mode. 211 | - Fixes an issue where if the opening fence of a code block contained spaces in the language definition, the code block would not get parsed. 212 | - Fixes an issue where a header with only a single formatted element child would stay expanded with '#' tags even after losing focus. 213 | - Renames the display name from 'Mark Sharp' to 'Mark Sharp - Markdown Editor'. 214 | 215 | ## 1.3.0 216 | 217 | **New Premium Feature: Presentation Mode** 218 | 219 | When presentation mode is enabled, Mark Sharp enters a read-only state and further stream lines the appearance of the document. This mode is useful when you're trying to present or just read your document without editing. 220 | 221 | To switch between presentation mode and edit mode, you can either: 222 | 223 | 1. Click on the M# entry in the [status bar](https://code.visualstudio.com/api/ux-guidelines/status-bar) at the bottom of the VS Code window. When not in presentation mode, the status bar item will display `M#: Edit Mode`. 224 | 2. Run the VS Code Command `Mark Sharp: Toggle Presentation Mode`. You can assign a keyboard shortcut of your choice to this command, which makes switching between presentation mode and edit mode a breeze. 225 | 226 | When in presentation mode, the following behaviors change: 227 | 228 | - The document is no longer editable. 229 | - The light-gray frontmatter text is no longer visible. The title and created header will still be displayed if present in the frontmatter fields. 230 | - Clicking on markdown elements will no longer trigger their unformatted state - for example, clicking on **bold** text won't show its '*' tags, clicking on a header won't show '#' tags. 231 | - Similarly, clicking on an image won't show its markdown definition below the image 232 | - Clicking on a Katex element will not expand to its markdown definition. 233 | - Clicking on link, wikilinks, and footnote references will now directly navigate you to the destination in a single-click. 234 | - Mermaid diagrams will display in 'diagram-only' mode. 235 | - Hovering on the edges of a table will not display the '+' signs to add columns and rows. 236 | - The draggable 6-dot icon on the left side no longer shows up. 237 | 238 | _Note: this feature is only available in the premium version of Mark Sharp. Please see licensing for details._ 239 | 240 | **New Outline Panel** 241 | 242 | This version introduces an outline panel which displays the headers in the current active Mark Sharp document. This can be found in the [Explorer view](https://code.visualstudio.com/docs/getstarted/userinterface#_explorer-view) when a Mark Sharp document is open. 243 | 244 | - Click on a header to scroll to its position in the page 245 | - Hover your mouse over a header to get a quick pop-up preview of the contents at that header 246 | - As you scroll up and down the page, the current header will be highlighted in the panel 247 | - Header sections that have children of a higher heading level can be collapsed 248 | 249 | You can re-arrange the position of the outline panel as you like, see [Custom Layout](https://code.visualstudio.com/docs/editor/custom-layout). 250 | 251 | _Note: the outline panel is only displayed when a Mark Sharp editor is in focus._ 252 | 253 | **Other Fixes** 254 | 255 | - Adds support for angle brackets in link URI's as per the [CommonMark Spec](https://spec.commonmark.org/0.30/#link-destination). 256 | - When clicking at the bottom of a page that doesn't have a paragraph as the last element (i.e. the document ends in a code block), Mark Sharp adds a paragraph below the last element to make it easy to add more content. However, this sometimes leads to accidentally dirtying the document from stray clicks. Now, the document will no longer be dirtied until you start typing. 257 | - Fixes a parsing issue when typing multiple links or wikilinks on the same line. Previously, only the first link element would get parsed and subsequent typed items would remain as plain text. 258 | - Fixes an issue where modifying a link text from the leading bracket `[` would sometimes lose the changes after becoming unfocused. 259 | - Fixes an edge case where adding to a list which was converted from an existing paragraph via a slash command could lead to a double bullet point issue. 260 | 261 | ## 1.2.6 262 | 263 | - Fixes an issue with lists where importing a list item with no contents would lead to errors 264 | - Fixes a document skew issue that would be caused on save if the user has VS Code settings that change the document save, such as `trimTrailingWhitespace`, `insertFinalNewline`, or `trimFinalNewlines`. 265 | - Fixes and improves the error message popup when webview errors are encountered. 266 | 267 | ## 1.2.5 268 | 269 | - Fixes various issues with lists: 270 | - Fixes an issue with creating new list items on slash-command-generated lists that led to `insertAfter: list node is not parent of list item node` error messages 271 | - Fixes export and parsing of nested check lists 272 | - Fixes Shift+Enter behavior on check lists 273 | 274 | ## 1.2.4 275 | 276 | - Fixes a regression introduced in version `1.2.3` where an imported document can be initialized incorrectly after being edited for the first time by Mark Sharp 277 | 278 | ## 1.2.3 279 | 280 | - Fixes a critical issue where text could get garbled when switching from Mark Sharp to the VS Code editor 281 | - Improves markdown parsing robustness, particularly around lines containing multiple links or wikilinks 282 | - Fixes various table import issues: 283 | - Rows with fewer columns than the table definition will now parse correctly and be filled with blanks 284 | - Rows with more columns will get truncated (but a table will still form) 285 | - Cells with list delimiters such as '-' and '*' will no longer cause parsing exceptions 286 | - Improves table export formatting for cells with double wide characters (such as CJK characters and emojis) 287 | - Improved cursor behavior when editing footnote anchors 288 | 289 | ## 1.2.2 290 | 291 | - Tables pasted from HTML sources will now produce a Markdown table 292 | - Fixes an issue with table editing after paste operations were performed the table 293 | - Fixes a table issue where inserting above the header row or deleting the header row would leave the table with two heading rows or no heading rows, respectively. 294 | 295 | ## 1.2.1 296 | 297 | - Fixes an import/export issue when the last item on a list is empty 298 | - Fixes import parsing of headers with formatted elements 299 | - Fixes the 'Switch Editor Mode' icon color for Dark Themes 300 | - Adds support for formatted elements within table cells - formatted text (bold, italics, highlights, etc.), links, and wikilinks. 301 | - Improves copy paste behavior within table cells 302 | 303 | ## 1.2.0 304 | 305 | - **Support for wikilinks**: wikilinks can link to local files, such as other Markdown files or images. To create a wikilink, surround the name of the note with double brackets, i.e. `my note`. For details, see the [usage guide](https://github.com/jonathanyeung/mark-sharp/blob/main/user-guide.md#wikilinks). 306 | - Added a button in the editor title bar at the top right of a document tab, M→. Clicking this button will run the `Switch Editor Mode` command and toggle between the Mark Sharp editor and VS Code's editor. 307 | - Link text now can contain formatted text such as bold, italics, and inline code. Links would previously parse incorrectly if there was formatted text in the link text. 308 | - Fixed a bug where clicking on a page would occasionally incorrectly add a paragraph at the bottom of the document and steal focus. 309 | 310 | ## 1.1.0 311 | 312 | - **Behavioral Change**: All commands have had their prefixes renamed from 'M#' to 'Mark Sharp' for better discoverability in the command palette (the underlying command ID's remain unchanged, so shortcuts do not need to be updated). 313 | - Added support for same-page header links (i.e., with `#header-1` as the link destination) 314 | - Added support for local links to other files on your file system. This works with both markdown files and any other file that VS Code can open (including code files, .jpg's, etc.) 315 | - Updated Mermaid Library; Added Gitgraph, Mindmap, and Timeline chart types. Additionally, some parsing issues with Mermaid diagrams were addressed. 316 | - Fixed an issue when invoking the 'Split View' command from the command palette. 317 | - Table Improvements: 318 | - **Behavioral Change**: typing into a cell will replace the text contents; double clicking in a cell before typing will append to the existing contents. 319 | - Fixed issues with arrow navigation into tables 320 | - Enter will move the focused cell down one row. 321 | - Hitting Enter on the final cell will create a new row 322 | - Fixed some table navigation issues 323 | - List Improvements: 324 | - Fixed issues with tabbing behavior 325 | - Fixed issues with mixing list types for sublists 326 | - Fixed general stability issues 327 | - Updated list style type themes 328 | - Fixed a few issues with arrow key navigation. 329 | - Clicking at the bottom of a page will place the cursor there, making it easier to add contents after a table, code block, or diagram. 330 | 331 | ## 1.0.0 332 | 333 | Initial Public Release 334 | 335 | ## 0.0.10 336 | 337 | - Removed the logic of automatically setting M# as the default Markdown editor 338 | - Fixed Undo/Redo logic on Windows and Linux 339 | - Fixed an issue where text formatters could cause a crash 340 | - Fixed a cursor jumping issue whenusing nested text formatters 341 | - Improved code block and frontmatter block usability issues: 342 | - You can now click on a border of code block to select it. Pressing `Backspace` or `Delete` will remove the code block if selected. 343 | - Fixed some border issues with code blocks. 344 | - Pasting a copied frontmatter block in the middle of a document will convert it to a regular code block 345 | - Fixed some layout issues when pasting code blocks. 346 | - Fixed some shift+Enter behavior issues with back-to-back code blocks. 347 | - Pasting content into a code block will now properly preserve newline delimitations 348 | - Fixed an issue where sometimes typing after a collapsed header would cause the child contents of the header to be out of order 349 | - Fixed an issue where sometimes text would still be formatted as a header even if the '#' were deleted. 350 | - Fixed a few issues around pressing `Enter` in the middle of a list. 351 | 352 | ## 0.0.9 353 | 354 | - **Upgraded Slash Commands** 355 | - Revamped the look of the slash command menu 356 | - Experimenting with sub-menus on Headings and Mermaid Diagram to reduce clutter on the initial menu. Note: you can still type `/h1` to create a heading 1 without needing to navigate the submenus. 357 | - Re-ordered the initial list of options 358 | - Added UI hints around `/mxn` table generation 359 | - Fixed an issue where a mouse pointer could interfere with arrow scrolling of the menu 360 | - Added a 'No Results' UI feedback item if all possiblities have been filtered. Previously, the menu would automatically close. 361 | - **Improved Markdown Links** 362 | - There was a usability issue when clicking on a Markdown-formatted link would immediately open the URL _and then_ expand the text, making it hard to modify the link text without also opening it. The behavior has been changed so that if you click on a formatted link, the cursor will first get placed into the text, thus expanding it - you can then click on the now-visible URL if you want to launch the URL, or you can start typing to manipulate the link text. Furthermore, the link text and the `[`, `(` characters are no longer part of the 'a' tag, so manipulating the unformatted link text is easier. 363 | - Link syntax parsing is much more robust now. For example, adding the missing `]` to `[link text(www.google.com)` will now parse into a link. Previously, the only trigger would be the trailing `)` character. 364 | - **Table Tweaks**: 365 | - Fixed issue where imported tables would have cells with leading and trailing whitespaces 366 | - Enhanced styling of table context menu 367 | - **Image Tweaks**: 368 | - The markdown textbox below an image is no longer expanded by default 369 | - Fixed a dark theme issue with the cursor in the markdown definition textbox 370 | - Added a slash command `/image` and a corresponding VS Code command `M#: Insert Image` that inserts an mage from a file picker. 371 | - Updated the logo 372 | 373 | ## 0.0.8 374 | 375 | - Fixed a cursor jumping issue when creating a formatting tag in the middle of a line 376 | - Fixed an issue where in some cases, typing a `- ` in the middle of a paragraph would create a list item and delete some text 377 | - Fixed a regression from 0.0.7 where `Switch Editor Mode` wouldn't work sometimes with a newly opened document. Also fixed an issue where `Switch Editor Mode` wouldn't work when the cursor was at the end of a line with trailing whitespace 378 | - Made an enhancement with `Switch Editor Mode` that will attempt to place the cursor in the same general vertical position of the screen; this makes it a bit easier to find your cursor when switching modes. 379 | - **Performance Fix**: Fixed an issue where pasting a larger block of text _or_ deleting a larger block of text would be very slow, sometimes even crashing M#. 380 | - Fixed some cases where pasting would fail with a "Lexical 113 Error". 381 | - Fixed an issue where when using a VS Code chord shortcut that included a modifier, for example `Cmd + K, Cmd + C`, the trailing letter 'C' would get typed. 382 | - Fixed an issue where if you did an `UNDO` immediately after opening a document, the document would disappear. 383 | - **List Enhancements** 384 | - Multi-line list items are now handled properly according to the GFW spec: 385 | - When you're in a list item, press `Shift+Enter` to create a new line within the current list item. You can add other elements as children to a list item - code blocks, quote blocks, etc. 386 | - Indentation level is now properly imported and exported 387 | - A lot of ergonomic improvements have been made to largely mimic the experience found in Microsoft Word. Here's a summary of the behavior: 388 | - `Enter` on an existing list item will create a new list item. 389 | - `Enter` on a blank list item will outdent one level, or exit the list block if at the top level 390 | - `Backspace` at the beginning of an list item will delete the list item. 391 | - `Shift+Enter` will add a new line to the current list item. 392 | - `Tab` will increase the indentation level, but now with an added restriction that you can only go one level higher than the previous sibling, as Markdown has this restriction. 393 | - `Shift+Tab` will decrease the indentation level. 394 | - Typing `- []` or `- [ ]` will create a check list (same behavior as before). 395 | - You can convert a list type by having the cursor on a list item, and then activate a slash command and selecting your desired list type. 396 | - Whenever two lists are placed immediately next to each other and are of the same type (numbered, bulleted, or a checklist), they will get merged. You can always separate them at the desired point with `Backspace`. 397 | 398 | ## 0.0.7 399 | 400 | - Switch editor functionality has been consolidated into a single command, which is now called `mark-sharp.switch-editor-mode`, whereas previously two separate commands controlled this behavior 401 | - Ctrl/Cmd+B will now properly bold text; Ctrl/Cmd+I will now properly italicize text. 402 | - **Note 1**: these commands won't do anything (by design) if your cursor highlight spans multiple lines or spans certain non-formattable elements. 403 | - **Note 2**: these may interfere with your workflow if you already have Cmd+B / I mapped to a VS Code shortcut; you may start accidentally bolding and italicizing your document when trying to trigger your VSCode shortcut action. I'll probably add a setting later to disable these formatting shortcuts. 404 | - Fixed a few theming issues for the inline Katex equation editor that made text hard to read in dark mode. 405 | - Headings can now have formatted text within them; fixed an issue where new-lining in the middle of a header would cause the new line to also have header formatting. 406 | - Code Block Fixes: 407 | - **Behavioral Change**: Instead of `Ctrl+Enter` exiting a code block when the cursor is on the last line, the key combo is now `Shift+Enter`. As before, `ArrowDown` will also exit a code block when pressed on the last line, even if there isn't a subsequent paragraph. 408 | - Fixed an issue where pressing `Enter` in an empty code block wouldn't do anything. 409 | - Some fixes in Frontmatter blocks that would put it in an invalid state 410 | - Quote Block Fixes: 411 | - Quote blocks can now have nested elements, such as headers, code blocks, and other quote blocks. 412 | - Improved Quote block ergonomics: 413 | - `Shift+Enter` will exit a quote block. `Shift+Enter` in the middle of a quote block will split it into two; Shift+Enter on the last line will add an empty paragraph outside the quote block 414 | - `Enter` inside a quote block will now create a new line within the quote block 415 | - `ArrowDown` on the last line of a quote block will create an empty paragraph if it doesn't exist 416 | - If the quote block is at the top of the document, `ArrowUp` on the first line of a quote block will add a line above 417 | - Fixed a few import/export issues with quote blocks. 418 | - Improved quote block styling 419 | - Fixed a styling issue where the page would have a scroll bar even if the document was empty. Footnotes will also appear within the viewport if the note height is short enough to allow it. 420 | - Fixed a styling issue where the collapsible header sidebar would be obscured if the page contents was too wide. 421 | - Fixed an issue where using `Shift+Enter` in a normal paragraph would cause the exported Markdown to have unexpected line breaks. 422 | - When both M# and the VS Code editor are visible at the same time, editing on the VS Code side will now push updates to M#. This should prevent any out-of-sync issues with the editors. Now you can have both views open together and edit on either side - furthermore, the `switch-editor-mode` command will now work in side-by-side mode as well, instead of always re-opening the doc in the existing tab group. 423 | - **Note**: when the editor pushes an update to M#, M#'s current implementation re-renders the entire document - if you have tables or diagrams, it leads to unsightly flashing; performance may also be slower for large documents. 424 | - A licensing page has been added (`M#: Manage License`). Activation (or lack thereof) doesn't affect any M# functionality in alpha builds. 425 | 426 | ## 0.0.6 427 | 428 | - When highlighting a selection, formatted text in the middle of the selection no longer get expanded. If the anchor or focus cursors are inside formatted text, they will continue to be expanded. 429 | - Fixed an issue where `Ctrl/Cmd + A` Select-All wouldn't keep the selection or error out when the document has a code block. 430 | - Slash command improvements: 431 | - Added icons, cleaned up some styling; menu now reflects the current theme 432 | - Fixed the 'code' command that generates code blocks 433 | - Fixed cursor placement issues when using a 'header' command 434 | - Added an explicit entry for creating a table. Note: typing a dimension (such as 3x5) can create a table of your desired dimension. 435 | - Theme fixes in checkboxes, tables, quote blocks, and text selection. 436 | - Table improvements: 437 | - Tables will be neatly formatted when exported in markdown to make columns align. 438 | - The cell action button (the down chevron icon) has been removed to free up space in the cell. The same menu can now be accessed with a right click. 439 | - Clicking near the left edge of the table can now select an entire row; clicking near the top edge of a column will select the entire column. Clicking on the top left corner will select the entire table. 440 | - Fixed an issue where copying cells from the header and pasting it in a non-header row would cause the non-header row to have the same background shading as the header. 441 | - Fixed a handful of copy / paste errors that were failing to paste and causing 'Minified Lexical Error 113' messages to show up. 442 | - Fixed a theming issue with Mermaid diagrams 443 | 444 | ## 0.0.5 445 | 446 | - Fixed an issue with cursor placement when switching to the editor while on a blank line 447 | - Fixed some copy paste issues with formatted text 448 | - Fixed the extra 'ghost' line issue that appeared immediately after Frontmatter blocks 449 | - Added Collapsible Headers. 450 | - For each header element, there's now a collapsible chevron that will appear if you mouse over the area immediately to the left of the header. Click the chevron to toggle the child contents of that header. 451 | - Switching editor mode will sync the fold status of the headers. 452 | - I added two convenience commands: `M#: Fold All` and `M#: Unfold All`. These behave exactly like the built-in `Fold All` and `Unfold All` commands, but are available when M# is open. I haven't added additional fold commands (VSCode has a whole slew of them), since you can quickly switch back to the VSCode editor, run fold commands as you wish, then go back to M#, and the fold status will sync over. 453 | - **Note**: Setting the folding state on the vscode editor side takes a couple hundred milliseconds - so if you jam the 'switch editor' command repeatedly, the folds may get out of the state you expect. 454 | - Persisted cursor position - if you switch between M# tabs, the cursor should remain at its last position for each respective tab. 455 | - Fixed an issue where using a vscode [chord shortcut](https://code.visualstudio.com/docs/getstarted/keybindings#_keyboard-rules) (for example `ctrl+k, m` / `cmd+k, m`) would type an 'm' character in M#. The code will stop the additional keypress for any chords registered to `ctrl/cmd+k` or `ctrl/cmd+j`, but not others. A follow up is to make his work for all chord shorctcuts of the user. 456 | - Theming fixes 457 | - Improved dark theme visibility on the table add row/column buttons and the cell context menu button. It's still not perfect yet. 458 | - Fixed dark theme with mermaid diagrams. I also enhanced the look a little bit to match the current VS Code theme. 459 | - Improved dark themes around code block menus 460 | - Fixed an issue when there are multiple mermaid diagrams on the same page. 461 | - Fixed an issue here Ctrl+A / Select All would cause a crash. There are still some problematic cases with select-all. 462 | 463 | ## 0.0.4 464 | 465 | - Fixes critical skew bug around undo/redo. Previously, using undo/redo would likely cause the document offset to get skewed, which in turn caused the document to get garbled. 466 | - Improvements to tables 467 | - Arrow keys and tabs work much better now when the cell editor is in focus 468 | - Add/Remove header option has been removed, since markdown tables always have a header 469 | - Fixed a bug where a table sometimes would get locked by the selection and couldn't be edited 470 | - Column left/right/center alignments can now be altered in the table context menu and will be properly imported/exported to markdown. 471 | - Fixed an issue with formatted text (bold, italics) where clicking into the middle of a node and then typing would cause weird cursor jumping issues 472 | - Fixed some issues where pressing 'END' wouldn't always move the cursor to the end of the line when formatted text was present 473 | - Improvements to footnotes 474 | - Introduced a new command `M#: Insert Footnote` and a corresponding slash command that will insert a footnote. Footnote references added this way get placed at the end of a document and the keys will auto-increment. If a URL is detected on the clipboard, then it'll be used as the footnote text. (This behavior may later prove to be too weird and be removed). 475 | - The footnote anchor will now show the raw syntax `[^1]` when in focus. The key can be edited, which will also update the corresponding reference key. Breaking the footnote anchor pattern will remove the footnote. Some usability issues still exist here, particularly in re-detecting the anchor (you need to type out an additional space after the trailing ']' to trigger it.) 476 | - Hovering over a footnote anchor will show the reference text 477 | - Some minor styling enhancements in the footnote section 478 | - Bug fixes around Enter and deletion/reversion of footnote anchors 479 | 480 | ## 0.0.3 481 | 482 | - Check boxes in a check list can now be toggled. 483 | - Multi-line quote blocks are now parsed correctly 484 | - Support for Katex, both inline and in blocks. Inline is triggered with $f(x)$ syntax, while a Katex block can be created by typing `$$ ` 485 | - Fixed issue where deleting an opening formatting tag and then re-adding it wasn't reapplying the formatting. 486 | - Added a convenience command for inserting tables: `M#: Insert Table` 487 | - Fixed issue with code block generation when the language had symbols like in "c#" or "c++" 488 | - Fixed gap styling issue when there are consecutive code blocks on a page 489 | - Various fixes around cursor placement when toggling between editor modes 490 | - Fixed issue where empty headers like "### " would disappear and no longer be selectable or editable 491 | - Pressing Home/End keys will now mimic the behavior of VS Code by moving the cursor to the front and end of the line. It will no longer scroll the webview up or down. 492 | - Ctrl+F will now open a Find Widget 493 | - Pressing Shift+Tab anywhere on a 2nd + level list item will now outdent it. 494 | - Typing "-" followed by "[]" or "[ ]" will now convert the bullet list to a check list 495 | 496 | ## 0.0.2 497 | 498 | - Improvements to cursor behavior: 499 | - Cursor has an initial placement when an empty markdown file is open. 500 | - A cursor is added to the end of the document when an existing markdown file is opened. 501 | - The click target for focusing on the editor now span the page 502 | - An initial prototype of slash commands. Press '/' to activate - there are a limited set of available commands. 503 | - A new convenience command `M#: Insert Mermaid Diagram` that can create mermaid diagrams with basic templates. This functionality is also available in slash commands. Intention is to figure how the feel of Command Palette driven interaction vs. in-line slash command interaction. 504 | - Horizontal Rule support - this can be triggered by typing `***` or `---`. 505 | - Improvements to tables 506 | - Fixed positioning of '+' buttons to add new rows 507 | - Fixed an issue where highlighting a table and pressing backspace caused an exception. 508 | - Pressing Arrow keys while on the top and bottom row of a table can now properly navigate out of the table. 509 | - General styling cleanup. 510 | 511 | ## 0.0.1 512 | 513 | - Initial release 514 | --------------------------------------------------------------------------------