├── .eslintrc.js ├── .gitignore ├── .prettierrc ├── .vscode ├── extensions.json └── launch.json ├── .vscodeignore ├── LICENSE.txt ├── NOTES.md ├── README.md ├── ckeditor5-build-markdown ├── .vscode │ └── launch.json ├── README.md ├── build │ ├── ckeditor.js │ └── ckeditor.js.map ├── package-lock.json ├── package.json ├── sample │ ├── example.md │ ├── index.html │ ├── sample-colors-dark.css │ ├── sample-colors-light.css │ └── sample-markdown-data.js ├── src │ ├── ckeditor.js │ └── styles.css └── webpack.config.js ├── examples ├── example.md ├── simpleExample.md ├── test.txt ├── test │ ├── example1.md │ ├── example2.md │ └── example3.md └── tinyExample.md ├── package-lock.json ├── package.json ├── src ├── dispose.ts ├── extension.ts ├── markdownEditor.ts ├── markdownEditorInitScript.js └── util.ts ├── tsconfig.json └── webpack.config.js /.eslintrc.js: -------------------------------------------------------------------------------- 1 | /**@type {import('eslint').Linter.Config} */ 2 | // eslint-disable-next-line no-undef 3 | module.exports = { 4 | root: true, 5 | parser: '@typescript-eslint/parser', 6 | plugins: ['@typescript-eslint'], 7 | extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'], 8 | rules: { 9 | semi: [2, 'always'], 10 | '@typescript-eslint/no-unused-vars': 0, 11 | '@typescript-eslint/no-explicit-any': 0, 12 | '@typescript-eslint/explicit-module-boundary-types': 0, 13 | '@typescript-eslint/no-non-null-assertion': 0, 14 | env: { 15 | browser: true, 16 | node: true, 17 | }, 18 | }, 19 | }; 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | *.vsix 4 | *.log 5 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "singleQuote": true, 4 | "printWidth": 100, 5 | "embeddedLanguageFormatting": "auto" 6 | } 7 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations. 3 | // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp 4 | 5 | // List of extensions which should be recommended for users of this workspace. 6 | "recommendations": [ 7 | "dbaeumer.vscode-eslint" 8 | ] 9 | } -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | // A launch configuration that compiles the extension and then opens it inside a new window 2 | { 3 | "version": "0.2.0", 4 | "configurations": [ 5 | { 6 | "name": "Launch Extension", 7 | "type": "extensionHost", 8 | "request": "launch", 9 | "runtimeExecutable": "${execPath}", 10 | "args": [ 11 | "${workspaceRoot}/examples", 12 | "--extensionDevelopmentPath=${workspaceRoot}", 13 | "--disable-extensions=1" 14 | ], 15 | "outFiles": ["${workspaceFolder}/dist/**/*.js"], 16 | "preLaunchTask": "npm: webpack" 17 | }, 18 | { 19 | "name": "Extension Tests", 20 | "type": "extensionHost", 21 | "request": "launch", 22 | "runtimeExecutable": "${execPath}", 23 | "args": [ 24 | "${workspaceRoot}/examples", 25 | "--extensionDevelopmentPath=${workspaceRoot}", 26 | "--disable-extensions=1" 27 | ], 28 | "outFiles": ["${workspaceFolder}/out/test/**/*.js"], 29 | "preLaunchTask": "npm: test-compile" 30 | } 31 | ] 32 | } 33 | -------------------------------------------------------------------------------- /.vscodeignore: -------------------------------------------------------------------------------- 1 | **/* 2 | !**/dist/**/* 3 | !LICENSE.txt 4 | !ckeditor5-build-markdown/build/**/* 5 | !**/src/markdownEditorInitScript.js -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright 2022 Adam Rose 2 | 3 | This program is free software: you can redistribute it and/or modify 4 | it under the terms of the GNU General Public License as published by 5 | the Free Software Foundation, either version 3 of the License, or 6 | (at your option) any later version. 7 | 8 | This program is distributed in the hope that it will be useful, 9 | but WITHOUT ANY WARRANTY; without even the implied warranty of 10 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 11 | GNU General Public License for more details. 12 | 13 | For the full text of this license, see below or . 14 | 15 | ---------------------------------------------------------------------- 16 | 17 | GNU GENERAL PUBLIC LICENSE 18 | Version 3, 29 June 2007 19 | 20 | Copyright (C) 2007 Free Software Foundation, Inc. 21 | Everyone is permitted to copy and distribute verbatim copies 22 | of this license document, but changing it is not allowed. 23 | 24 | Preamble 25 | 26 | The GNU General Public License is a free, copyleft license for 27 | software and other kinds of works. 28 | 29 | The licenses for most software and other practical works are designed 30 | to take away your freedom to share and change the works. By contrast, 31 | the GNU General Public License is intended to guarantee your freedom to 32 | share and change all versions of a program--to make sure it remains free 33 | software for all its users. We, the Free Software Foundation, use the 34 | GNU General Public License for most of our software; it applies also to 35 | any other work released this way by its authors. You can apply it to 36 | your programs, too. 37 | 38 | When we speak of free software, we are referring to freedom, not 39 | price. Our General Public Licenses are designed to make sure that you 40 | have the freedom to distribute copies of free software (and charge for 41 | them if you wish), that you receive source code or can get it if you 42 | want it, that you can change the software or use pieces of it in new 43 | free programs, and that you know you can do these things. 44 | 45 | To protect your rights, we need to prevent others from denying you 46 | these rights or asking you to surrender the rights. Therefore, you have 47 | certain responsibilities if you distribute copies of the software, or if 48 | you modify it: responsibilities to respect the freedom of others. 49 | 50 | For example, if you distribute copies of such a program, whether 51 | gratis or for a fee, you must pass on to the recipients the same 52 | freedoms that you received. You must make sure that they, too, receive 53 | or can get the source code. And you must show them these terms so they 54 | know their rights. 55 | 56 | Developers that use the GNU GPL protect your rights with two steps: 57 | (1) assert copyright on the software, and (2) offer you this License 58 | giving you legal permission to copy, distribute and/or modify it. 59 | 60 | For the developers' and authors' protection, the GPL clearly explains 61 | that there is no warranty for this free software. For both users' and 62 | authors' sake, the GPL requires that modified versions be marked as 63 | changed, so that their problems will not be attributed erroneously to 64 | authors of previous versions. 65 | 66 | Some devices are designed to deny users access to install or run 67 | modified versions of the software inside them, although the manufacturer 68 | can do so. This is fundamentally incompatible with the aim of 69 | protecting users' freedom to change the software. The systematic 70 | pattern of such abuse occurs in the area of products for individuals to 71 | use, which is precisely where it is most unacceptable. Therefore, we 72 | have designed this version of the GPL to prohibit the practice for those 73 | products. If such problems arise substantially in other domains, we 74 | stand ready to extend this provision to those domains in future versions 75 | of the GPL, as needed to protect the freedom of users. 76 | 77 | Finally, every program is threatened constantly by software patents. 78 | States should not allow patents to restrict development and use of 79 | software on general-purpose computers, but in those that do, we wish to 80 | avoid the special danger that patents applied to a free program could 81 | make it effectively proprietary. To prevent this, the GPL assures that 82 | patents cannot be used to render the program non-free. 83 | 84 | The precise terms and conditions for copying, distribution and 85 | modification follow. 86 | 87 | TERMS AND CONDITIONS 88 | 89 | 0. Definitions. 90 | 91 | "This License" refers to version 3 of the GNU General Public License. 92 | 93 | "Copyright" also means copyright-like laws that apply to other kinds of 94 | works, such as semiconductor masks. 95 | 96 | "The Program" refers to any copyrightable work licensed under this 97 | License. Each licensee is addressed as "you". "Licensees" and 98 | "recipients" may be individuals or organizations. 99 | 100 | To "modify" a work means to copy from or adapt all or part of the work 101 | in a fashion requiring copyright permission, other than the making of an 102 | exact copy. The resulting work is called a "modified version" of the 103 | earlier work or a work "based on" the earlier work. 104 | 105 | A "covered work" means either the unmodified Program or a work based 106 | on the Program. 107 | 108 | To "propagate" a work means to do anything with it that, without 109 | permission, would make you directly or secondarily liable for 110 | infringement under applicable copyright law, except executing it on a 111 | computer or modifying a private copy. Propagation includes copying, 112 | distribution (with or without modification), making available to the 113 | public, and in some countries other activities as well. 114 | 115 | To "convey" a work means any kind of propagation that enables other 116 | parties to make or receive copies. Mere interaction with a user through 117 | a computer network, with no transfer of a copy, is not conveying. 118 | 119 | An interactive user interface displays "Appropriate Legal Notices" 120 | to the extent that it includes a convenient and prominently visible 121 | feature that (1) displays an appropriate copyright notice, and (2) 122 | tells the user that there is no warranty for the work (except to the 123 | extent that warranties are provided), that licensees may convey the 124 | work under this License, and how to view a copy of this License. If 125 | the interface presents a list of user commands or options, such as a 126 | menu, a prominent item in the list meets this criterion. 127 | 128 | 1. Source Code. 129 | 130 | The "source code" for a work means the preferred form of the work 131 | for making modifications to it. "Object code" means any non-source 132 | form of a work. 133 | 134 | A "Standard Interface" means an interface that either is an official 135 | standard defined by a recognized standards body, or, in the case of 136 | interfaces specified for a particular programming language, one that 137 | is widely used among developers working in that language. 138 | 139 | The "System Libraries" of an executable work include anything, other 140 | than the work as a whole, that (a) is included in the normal form of 141 | packaging a Major Component, but which is not part of that Major 142 | Component, and (b) serves only to enable use of the work with that 143 | Major Component, or to implement a Standard Interface for which an 144 | implementation is available to the public in source code form. A 145 | "Major Component", in this context, means a major essential component 146 | (kernel, window system, and so on) of the specific operating system 147 | (if any) on which the executable work runs, or a compiler used to 148 | produce the work, or an object code interpreter used to run it. 149 | 150 | The "Corresponding Source" for a work in object code form means all 151 | the source code needed to generate, install, and (for an executable 152 | work) run the object code and to modify the work, including scripts to 153 | control those activities. However, it does not include the work's 154 | System Libraries, or general-purpose tools or generally available free 155 | programs which are used unmodified in performing those activities but 156 | which are not part of the work. For example, Corresponding Source 157 | includes interface definition files associated with source files for 158 | the work, and the source code for shared libraries and dynamically 159 | linked subprograms that the work is specifically designed to require, 160 | such as by intimate data communication or control flow between those 161 | subprograms and other parts of the work. 162 | 163 | The Corresponding Source need not include anything that users 164 | can regenerate automatically from other parts of the Corresponding 165 | Source. 166 | 167 | The Corresponding Source for a work in source code form is that 168 | same work. 169 | 170 | 2. Basic Permissions. 171 | 172 | All rights granted under this License are granted for the term of 173 | copyright on the Program, and are irrevocable provided the stated 174 | conditions are met. This License explicitly affirms your unlimited 175 | permission to run the unmodified Program. The output from running a 176 | covered work is covered by this License only if the output, given its 177 | content, constitutes a covered work. This License acknowledges your 178 | rights of fair use or other equivalent, as provided by copyright law. 179 | 180 | You may make, run and propagate covered works that you do not 181 | convey, without conditions so long as your license otherwise remains 182 | in force. You may convey covered works to others for the sole purpose 183 | of having them make modifications exclusively for you, or provide you 184 | with facilities for running those works, provided that you comply with 185 | the terms of this License in conveying all material for which you do 186 | not control copyright. Those thus making or running the covered works 187 | for you must do so exclusively on your behalf, under your direction 188 | and control, on terms that prohibit them from making any copies of 189 | your copyrighted material outside their relationship with you. 190 | 191 | Conveying under any other circumstances is permitted solely under 192 | the conditions stated below. Sublicensing is not allowed; section 10 193 | makes it unnecessary. 194 | 195 | 3. Protecting Users' Legal Rights From Anti-Circumvention Law. 196 | 197 | No covered work shall be deemed part of an effective technological 198 | measure under any applicable law fulfilling obligations under article 199 | 11 of the WIPO copyright treaty adopted on 20 December 1996, or 200 | similar laws prohibiting or restricting circumvention of such 201 | measures. 202 | 203 | When you convey a covered work, you waive any legal power to forbid 204 | circumvention of technological measures to the extent such circumvention 205 | is effected by exercising rights under this License with respect to 206 | the covered work, and you disclaim any intention to limit operation or 207 | modification of the work as a means of enforcing, against the work's 208 | users, your or third parties' legal rights to forbid circumvention of 209 | technological measures. 210 | 211 | 4. Conveying Verbatim Copies. 212 | 213 | You may convey verbatim copies of the Program's source code as you 214 | receive it, in any medium, provided that you conspicuously and 215 | appropriately publish on each copy an appropriate copyright notice; 216 | keep intact all notices stating that this License and any 217 | non-permissive terms added in accord with section 7 apply to the code; 218 | keep intact all notices of the absence of any warranty; and give all 219 | recipients a copy of this License along with the Program. 220 | 221 | You may charge any price or no price for each copy that you convey, 222 | and you may offer support or warranty protection for a fee. 223 | 224 | 5. Conveying Modified Source Versions. 225 | 226 | You may convey a work based on the Program, or the modifications to 227 | produce it from the Program, in the form of source code under the 228 | terms of section 4, provided that you also meet all of these conditions: 229 | 230 | a) The work must carry prominent notices stating that you modified 231 | it, and giving a relevant date. 232 | 233 | b) The work must carry prominent notices stating that it is 234 | released under this License and any conditions added under section 235 | 7. This requirement modifies the requirement in section 4 to 236 | "keep intact all notices". 237 | 238 | c) You must license the entire work, as a whole, under this 239 | License to anyone who comes into possession of a copy. This 240 | License will therefore apply, along with any applicable section 7 241 | additional terms, to the whole of the work, and all its parts, 242 | regardless of how they are packaged. This License gives no 243 | permission to license the work in any other way, but it does not 244 | invalidate such permission if you have separately received it. 245 | 246 | d) If the work has interactive user interfaces, each must display 247 | Appropriate Legal Notices; however, if the Program has interactive 248 | interfaces that do not display Appropriate Legal Notices, your 249 | work need not make them do so. 250 | 251 | A compilation of a covered work with other separate and independent 252 | works, which are not by their nature extensions of the covered work, 253 | and which are not combined with it such as to form a larger program, 254 | in or on a volume of a storage or distribution medium, is called an 255 | "aggregate" if the compilation and its resulting copyright are not 256 | used to limit the access or legal rights of the compilation's users 257 | beyond what the individual works permit. Inclusion of a covered work 258 | in an aggregate does not cause this License to apply to the other 259 | parts of the aggregate. 260 | 261 | 6. Conveying Non-Source Forms. 262 | 263 | You may convey a covered work in object code form under the terms 264 | of sections 4 and 5, provided that you also convey the 265 | machine-readable Corresponding Source under the terms of this License, 266 | in one of these ways: 267 | 268 | a) Convey the object code in, or embodied in, a physical product 269 | (including a physical distribution medium), accompanied by the 270 | Corresponding Source fixed on a durable physical medium 271 | customarily used for software interchange. 272 | 273 | b) Convey the object code in, or embodied in, a physical product 274 | (including a physical distribution medium), accompanied by a 275 | written offer, valid for at least three years and valid for as 276 | long as you offer spare parts or customer support for that product 277 | model, to give anyone who possesses the object code either (1) a 278 | copy of the Corresponding Source for all the software in the 279 | product that is covered by this License, on a durable physical 280 | medium customarily used for software interchange, for a price no 281 | more than your reasonable cost of physically performing this 282 | conveying of source, or (2) access to copy the 283 | Corresponding Source from a network server at no charge. 284 | 285 | c) Convey individual copies of the object code with a copy of the 286 | written offer to provide the Corresponding Source. This 287 | alternative is allowed only occasionally and noncommercially, and 288 | only if you received the object code with such an offer, in accord 289 | with subsection 6b. 290 | 291 | d) Convey the object code by offering access from a designated 292 | place (gratis or for a charge), and offer equivalent access to the 293 | Corresponding Source in the same way through the same place at no 294 | further charge. You need not require recipients to copy the 295 | Corresponding Source along with the object code. If the place to 296 | copy the object code is a network server, the Corresponding Source 297 | may be on a different server (operated by you or a third party) 298 | that supports equivalent copying facilities, provided you maintain 299 | clear directions next to the object code saying where to find the 300 | Corresponding Source. Regardless of what server hosts the 301 | Corresponding Source, you remain obligated to ensure that it is 302 | available for as long as needed to satisfy these requirements. 303 | 304 | e) Convey the object code using peer-to-peer transmission, provided 305 | you inform other peers where the object code and Corresponding 306 | Source of the work are being offered to the general public at no 307 | charge under subsection 6d. 308 | 309 | A separable portion of the object code, whose source code is excluded 310 | from the Corresponding Source as a System Library, need not be 311 | included in conveying the object code work. 312 | 313 | A "User Product" is either (1) a "consumer product", which means any 314 | tangible personal property which is normally used for personal, family, 315 | or household purposes, or (2) anything designed or sold for incorporation 316 | into a dwelling. In determining whether a product is a consumer product, 317 | doubtful cases shall be resolved in favor of coverage. For a particular 318 | product received by a particular user, "normally used" refers to a 319 | typical or common use of that class of product, regardless of the status 320 | of the particular user or of the way in which the particular user 321 | actually uses, or expects or is expected to use, the product. A product 322 | is a consumer product regardless of whether the product has substantial 323 | commercial, industrial or non-consumer uses, unless such uses represent 324 | the only significant mode of use of the product. 325 | 326 | "Installation Information" for a User Product means any methods, 327 | procedures, authorization keys, or other information required to install 328 | and execute modified versions of a covered work in that User Product from 329 | a modified version of its Corresponding Source. The information must 330 | suffice to ensure that the continued functioning of the modified object 331 | code is in no case prevented or interfered with solely because 332 | modification has been made. 333 | 334 | If you convey an object code work under this section in, or with, or 335 | specifically for use in, a User Product, and the conveying occurs as 336 | part of a transaction in which the right of possession and use of the 337 | User Product is transferred to the recipient in perpetuity or for a 338 | fixed term (regardless of how the transaction is characterized), the 339 | Corresponding Source conveyed under this section must be accompanied 340 | by the Installation Information. But this requirement does not apply 341 | if neither you nor any third party retains the ability to install 342 | modified object code on the User Product (for example, the work has 343 | been installed in ROM). 344 | 345 | The requirement to provide Installation Information does not include a 346 | requirement to continue to provide support service, warranty, or updates 347 | for a work that has been modified or installed by the recipient, or for 348 | the User Product in which it has been modified or installed. Access to a 349 | network may be denied when the modification itself materially and 350 | adversely affects the operation of the network or violates the rules and 351 | protocols for communication across the network. 352 | 353 | Corresponding Source conveyed, and Installation Information provided, 354 | in accord with this section must be in a format that is publicly 355 | documented (and with an implementation available to the public in 356 | source code form), and must require no special password or key for 357 | unpacking, reading or copying. 358 | 359 | 7. Additional Terms. 360 | 361 | "Additional permissions" are terms that supplement the terms of this 362 | License by making exceptions from one or more of its conditions. 363 | Additional permissions that are applicable to the entire Program shall 364 | be treated as though they were included in this License, to the extent 365 | that they are valid under applicable law. If additional permissions 366 | apply only to part of the Program, that part may be used separately 367 | under those permissions, but the entire Program remains governed by 368 | this License without regard to the additional permissions. 369 | 370 | When you convey a copy of a covered work, you may at your option 371 | remove any additional permissions from that copy, or from any part of 372 | it. (Additional permissions may be written to require their own 373 | removal in certain cases when you modify the work.) You may place 374 | additional permissions on material, added by you to a covered work, 375 | for which you have or can give appropriate copyright permission. 376 | 377 | Notwithstanding any other provision of this License, for material you 378 | add to a covered work, you may (if authorized by the copyright holders of 379 | that material) supplement the terms of this License with terms: 380 | 381 | a) Disclaiming warranty or limiting liability differently from the 382 | terms of sections 15 and 16 of this License; or 383 | 384 | b) Requiring preservation of specified reasonable legal notices or 385 | author attributions in that material or in the Appropriate Legal 386 | Notices displayed by works containing it; or 387 | 388 | c) Prohibiting misrepresentation of the origin of that material, or 389 | requiring that modified versions of such material be marked in 390 | reasonable ways as different from the original version; or 391 | 392 | d) Limiting the use for publicity purposes of names of licensors or 393 | authors of the material; or 394 | 395 | e) Declining to grant rights under trademark law for use of some 396 | trade names, trademarks, or service marks; or 397 | 398 | f) Requiring indemnification of licensors and authors of that 399 | material by anyone who conveys the material (or modified versions of 400 | it) with contractual assumptions of liability to the recipient, for 401 | any liability that these contractual assumptions directly impose on 402 | those licensors and authors. 403 | 404 | All other non-permissive additional terms are considered "further 405 | restrictions" within the meaning of section 10. If the Program as you 406 | received it, or any part of it, contains a notice stating that it is 407 | governed by this License along with a term that is a further 408 | restriction, you may remove that term. If a license document contains 409 | a further restriction but permits relicensing or conveying under this 410 | License, you may add to a covered work material governed by the terms 411 | of that license document, provided that the further restriction does 412 | not survive such relicensing or conveying. 413 | 414 | If you add terms to a covered work in accord with this section, you 415 | must place, in the relevant source files, a statement of the 416 | additional terms that apply to those files, or a notice indicating 417 | where to find the applicable terms. 418 | 419 | Additional terms, permissive or non-permissive, may be stated in the 420 | form of a separately written license, or stated as exceptions; 421 | the above requirements apply either way. 422 | 423 | 8. Termination. 424 | 425 | You may not propagate or modify a covered work except as expressly 426 | provided under this License. Any attempt otherwise to propagate or 427 | modify it is void, and will automatically terminate your rights under 428 | this License (including any patent licenses granted under the third 429 | paragraph of section 11). 430 | 431 | However, if you cease all violation of this License, then your 432 | license from a particular copyright holder is reinstated (a) 433 | provisionally, unless and until the copyright holder explicitly and 434 | finally terminates your license, and (b) permanently, if the copyright 435 | holder fails to notify you of the violation by some reasonable means 436 | prior to 60 days after the cessation. 437 | 438 | Moreover, your license from a particular copyright holder is 439 | reinstated permanently if the copyright holder notifies you of the 440 | violation by some reasonable means, this is the first time you have 441 | received notice of violation of this License (for any work) from that 442 | copyright holder, and you cure the violation prior to 30 days after 443 | your receipt of the notice. 444 | 445 | Termination of your rights under this section does not terminate the 446 | licenses of parties who have received copies or rights from you under 447 | this License. If your rights have been terminated and not permanently 448 | reinstated, you do not qualify to receive new licenses for the same 449 | material under section 10. 450 | 451 | 9. Acceptance Not Required for Having Copies. 452 | 453 | You are not required to accept this License in order to receive or 454 | run a copy of the Program. Ancillary propagation of a covered work 455 | occurring solely as a consequence of using peer-to-peer transmission 456 | to receive a copy likewise does not require acceptance. However, 457 | nothing other than this License grants you permission to propagate or 458 | modify any covered work. These actions infringe copyright if you do 459 | not accept this License. Therefore, by modifying or propagating a 460 | covered work, you indicate your acceptance of this License to do so. 461 | 462 | 10. Automatic Licensing of Downstream Recipients. 463 | 464 | Each time you convey a covered work, the recipient automatically 465 | receives a license from the original licensors, to run, modify and 466 | propagate that work, subject to this License. You are not responsible 467 | for enforcing compliance by third parties with this License. 468 | 469 | An "entity transaction" is a transaction transferring control of an 470 | organization, or substantially all assets of one, or subdividing an 471 | organization, or merging organizations. If propagation of a covered 472 | work results from an entity transaction, each party to that 473 | transaction who receives a copy of the work also receives whatever 474 | licenses to the work the party's predecessor in interest had or could 475 | give under the previous paragraph, plus a right to possession of the 476 | Corresponding Source of the work from the predecessor in interest, if 477 | the predecessor has it or can get it with reasonable efforts. 478 | 479 | You may not impose any further restrictions on the exercise of the 480 | rights granted or affirmed under this License. For example, you may 481 | not impose a license fee, royalty, or other charge for exercise of 482 | rights granted under this License, and you may not initiate litigation 483 | (including a cross-claim or counterclaim in a lawsuit) alleging that 484 | any patent claim is infringed by making, using, selling, offering for 485 | sale, or importing the Program or any portion of it. 486 | 487 | 11. Patents. 488 | 489 | A "contributor" is a copyright holder who authorizes use under this 490 | License of the Program or a work on which the Program is based. The 491 | work thus licensed is called the contributor's "contributor version". 492 | 493 | A contributor's "essential patent claims" are all patent claims 494 | owned or controlled by the contributor, whether already acquired or 495 | hereafter acquired, that would be infringed by some manner, permitted 496 | by this License, of making, using, or selling its contributor version, 497 | but do not include claims that would be infringed only as a 498 | consequence of further modification of the contributor version. For 499 | purposes of this definition, "control" includes the right to grant 500 | patent sublicenses in a manner consistent with the requirements of 501 | this License. 502 | 503 | Each contributor grants you a non-exclusive, worldwide, royalty-free 504 | patent license under the contributor's essential patent claims, to 505 | make, use, sell, offer for sale, import and otherwise run, modify and 506 | propagate the contents of its contributor version. 507 | 508 | In the following three paragraphs, a "patent license" is any express 509 | agreement or commitment, however denominated, not to enforce a patent 510 | (such as an express permission to practice a patent or covenant not to 511 | sue for patent infringement). To "grant" such a patent license to a 512 | party means to make such an agreement or commitment not to enforce a 513 | patent against the party. 514 | 515 | If you convey a covered work, knowingly relying on a patent license, 516 | and the Corresponding Source of the work is not available for anyone 517 | to copy, free of charge and under the terms of this License, through a 518 | publicly available network server or other readily accessible means, 519 | then you must either (1) cause the Corresponding Source to be so 520 | available, or (2) arrange to deprive yourself of the benefit of the 521 | patent license for this particular work, or (3) arrange, in a manner 522 | consistent with the requirements of this License, to extend the patent 523 | license to downstream recipients. "Knowingly relying" means you have 524 | actual knowledge that, but for the patent license, your conveying the 525 | covered work in a country, or your recipient's use of the covered work 526 | in a country, would infringe one or more identifiable patents in that 527 | country that you have reason to believe are valid. 528 | 529 | If, pursuant to or in connection with a single transaction or 530 | arrangement, you convey, or propagate by procuring conveyance of, a 531 | covered work, and grant a patent license to some of the parties 532 | receiving the covered work authorizing them to use, propagate, modify 533 | or convey a specific copy of the covered work, then the patent license 534 | you grant is automatically extended to all recipients of the covered 535 | work and works based on it. 536 | 537 | A patent license is "discriminatory" if it does not include within 538 | the scope of its coverage, prohibits the exercise of, or is 539 | conditioned on the non-exercise of one or more of the rights that are 540 | specifically granted under this License. You may not convey a covered 541 | work if you are a party to an arrangement with a third party that is 542 | in the business of distributing software, under which you make payment 543 | to the third party based on the extent of your activity of conveying 544 | the work, and under which the third party grants, to any of the 545 | parties who would receive the covered work from you, a discriminatory 546 | patent license (a) in connection with copies of the covered work 547 | conveyed by you (or copies made from those copies), or (b) primarily 548 | for and in connection with specific products or compilations that 549 | contain the covered work, unless you entered into that arrangement, 550 | or that patent license was granted, prior to 28 March 2007. 551 | 552 | Nothing in this License shall be construed as excluding or limiting 553 | any implied license or other defenses to infringement that may 554 | otherwise be available to you under applicable patent law. 555 | 556 | 12. No Surrender of Others' Freedom. 557 | 558 | If conditions are imposed on you (whether by court order, agreement or 559 | otherwise) that contradict the conditions of this License, they do not 560 | excuse you from the conditions of this License. If you cannot convey a 561 | covered work so as to satisfy simultaneously your obligations under this 562 | License and any other pertinent obligations, then as a consequence you may 563 | not convey it at all. For example, if you agree to terms that obligate you 564 | to collect a royalty for further conveying from those to whom you convey 565 | the Program, the only way you could satisfy both those terms and this 566 | License would be to refrain entirely from conveying the Program. 567 | 568 | 13. Use with the GNU Affero General Public License. 569 | 570 | Notwithstanding any other provision of this License, you have 571 | permission to link or combine any covered work with a work licensed 572 | under version 3 of the GNU Affero General Public License into a single 573 | combined work, and to convey the resulting work. The terms of this 574 | License will continue to apply to the part which is the covered work, 575 | but the special requirements of the GNU Affero General Public License, 576 | section 13, concerning interaction through a network will apply to the 577 | combination as such. 578 | 579 | 14. Revised Versions of this License. 580 | 581 | The Free Software Foundation may publish revised and/or new versions of 582 | the GNU General Public License from time to time. Such new versions will 583 | be similar in spirit to the present version, but may differ in detail to 584 | address new problems or concerns. 585 | 586 | Each version is given a distinguishing version number. If the 587 | Program specifies that a certain numbered version of the GNU General 588 | Public License "or any later version" applies to it, you have the 589 | option of following the terms and conditions either of that numbered 590 | version or of any later version published by the Free Software 591 | Foundation. If the Program does not specify a version number of the 592 | GNU General Public License, you may choose any version ever published 593 | by the Free Software Foundation. 594 | 595 | If the Program specifies that a proxy can decide which future 596 | versions of the GNU General Public License can be used, that proxy's 597 | public statement of acceptance of a version permanently authorizes you 598 | to choose that version for the Program. 599 | 600 | Later license versions may give you additional or different 601 | permissions. However, no additional obligations are imposed on any 602 | author or copyright holder as a result of your choosing to follow a 603 | later version. 604 | 605 | 15. Disclaimer of Warranty. 606 | 607 | THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY 608 | APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT 609 | HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY 610 | OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, 611 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 612 | PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM 613 | IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF 614 | ALL NECESSARY SERVICING, REPAIR OR CORRECTION. 615 | 616 | 16. Limitation of Liability. 617 | 618 | IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 619 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS 620 | THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY 621 | GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE 622 | USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF 623 | DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD 624 | PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), 625 | EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF 626 | SUCH DAMAGES. 627 | 628 | 17. Interpretation of Sections 15 and 16. 629 | 630 | If the disclaimer of warranty and limitation of liability provided 631 | above cannot be given local legal effect according to their terms, 632 | reviewing courts shall apply local law that most closely approximates 633 | an absolute waiver of all civil liability in connection with the 634 | Program, unless a warranty or assumption of liability accompanies a 635 | copy of the Program in return for a fee. 636 | 637 | END OF TERMS AND CONDITIONS 638 | 639 | How to Apply These Terms to Your New Programs 640 | 641 | If you develop a new program, and you want it to be of the greatest 642 | possible use to the public, the best way to achieve this is to make it 643 | free software which everyone can redistribute and change under these terms. 644 | 645 | To do so, attach the following notices to the program. It is safest 646 | to attach them to the start of each source file to most effectively 647 | state the exclusion of warranty; and each file should have at least 648 | the "copyright" line and a pointer to where the full notice is found. 649 | 650 | 651 | Copyright (C) 652 | 653 | This program is free software: you can redistribute it and/or modify 654 | it under the terms of the GNU General Public License as published by 655 | the Free Software Foundation, either version 3 of the License, or 656 | (at your option) any later version. 657 | 658 | This program is distributed in the hope that it will be useful, 659 | but WITHOUT ANY WARRANTY; without even the implied warranty of 660 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 661 | GNU General Public License for more details. 662 | 663 | You should have received a copy of the GNU General Public License 664 | along with this program. If not, see . 665 | 666 | Also add information on how to contact you by electronic and paper mail. 667 | 668 | If the program does terminal interaction, make it output a short 669 | notice like this when it starts in an interactive mode: 670 | 671 | Copyright (C) 672 | This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 673 | This is free software, and you are welcome to redistribute it 674 | under certain conditions; type `show c' for details. 675 | 676 | The hypothetical commands `show w' and `show c' should show the appropriate 677 | parts of the General Public License. Of course, your program's commands 678 | might be different; for a GUI interface, you would use an "about box". 679 | 680 | You should also get your employer (if you work as a programmer) or school, 681 | if any, to sign a "copyright disclaimer" for the program, if necessary. 682 | For more information on this, and how to apply and follow the GNU GPL, see 683 | . 684 | 685 | The GNU General Public License does not permit incorporating your program 686 | into proprietary programs. If your program is a subroutine library, you 687 | may consider it more useful to permit linking proprietary applications with 688 | the library. If this is what you want to do, use the GNU Lesser General 689 | Public License instead of this License. But first, please read 690 | . 691 | -------------------------------------------------------------------------------- /NOTES.md: -------------------------------------------------------------------------------- 1 | # Scripts 2 | 3 | ``` 4 | # Set up (see https://code.visualstudio.com/api/working-with-extensions/publishing-extension) 5 | npm install -g vsce 6 | 7 | # Build and package 8 | (cd ./ckeditor5-build-markdown && npm run build) 9 | # Remember to increment the version in package.json 10 | vsce package 11 | code --force --install-extension $(find -name "markdown-wysiwyg*" | tail -1) 12 | 13 | # Publish extension 14 | vsce publish 15 | npx ovsx publish -p ${OVSX_TOKEN} 16 | 17 | # Run CKEditor5 subproject 18 | (cd ./ckeditor5-build-markdown && npm start) 19 | ``` 20 | 21 | # Architecture 22 | 23 | Implements a `CustomTextEditor` for markdown (.md) files. 24 | 25 | Our `CustomTextEditor` implementation (called `MarkdownEditorProvider`) is defined in `markdownEditor.js` and registers a webview to show the user when that editor is active 26 | 27 | Communication between the webview and VS Code is done using `vscode.postMessage` and is described [here](https://code.visualstudio.com/api/extension-guides/custom-editors#custom-text-editor) 28 | 29 | The method `getHtmlForWebview` defines what this webview looks like, in our case importing and rendering a custom CKEditor5 build for markdown from the folder `ckeditor5-build-markdown`. It then runs `markdownEditorInitScript` inside the webview to register. 30 | 31 | # TODO 32 | 33 | - Add autolink to CKE editor 34 | - Sync scroll position (to plain editor and to markdown preview) 35 | - Do it like this [https://stackoverflow.com/questions/54556208/scroll-to-marker-in-ckeditor-5](https://stackoverflow.com/questions/54556208/scroll-to-marker-in-ckeditor-5) 36 | - And need this for importing that function [https://stackoverflow.com/questions/61307979/how-to-import-npm-packages-in-vs-code-webview-extension-development](https://stackoverflow.com/questions/61307979/how-to-import-npm-packages-in-vs-code-webview-extension-development) 37 | - Remove breadcrumb 38 | - [https://github.com/microsoft/vscode-extension-samples/issues/369#issuecomment-754231994](https://github.com/microsoft/vscode-extension-samples/issues/369#issuecomment-754231994) 39 | - [https://vscode-dev-community.slack.com/archives/C74CB59NE/p1644800862386389](https://vscode-dev-community.slack.com/archives/C74CB59NE/p1644800862386389) 40 | - Add code formatting 41 | - [https://github.com/ckeditor/ckeditor5/issues/1354](https://github.com/ckeditor/ckeditor5/issues/1354) 42 | - [https://github.com/ckeditor/ckeditor5/issues/6309](https://github.com/ckeditor/ckeditor5/issues/6309) 43 | - [https://github.com/ckeditor/ckeditor5/issues/436](https://github.com/ckeditor/ckeditor5/issues/436) 44 | - [https://github.com/ckeditor/ckeditor5/issues/5769](https://github.com/ckeditor/ckeditor5/issues/5769) 45 | - I couldnt get this working without errors 46 | - [https://github.com/regischen/CKEditor5-CodeBlock-With-Syntax-Highlight](https://github.com/regischen/CKEditor5-CodeBlock-With-Syntax-Highlight) 47 | - Support pasting clipboard images like [https://github.com/telesoho/vscode-markdown-paste-image](https://github.com/telesoho/vscode-markdown-paste-image) 48 | - Will need this [https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/upload-adapter.html](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/upload-adapter.html) 49 | - [https://vscode-dev-community.slack.com/archives/C74CB59NE/p1647204814315079](https://vscode-dev-community.slack.com/archives/C74CB59NE/p1647204814315079) 50 | - Support DocumentSymbolProvider so that the outline and breadcrumb views aren't blank 51 | - [https://stackoverflow.com/a/59132169/3620725](https://stackoverflow.com/a/59132169/3620725) 52 | - Need this upstream issue completed first: [https://github.com/microsoft/vscode/issues/97095](https://github.com/microsoft/vscode/issues/97095) 53 | - Support extended HTML features [https://ckeditor.com/docs/ckeditor5/latest/features/markdown.html#extending-formatting-support](https://ckeditor.com/docs/ckeditor5/latest/features/markdown.html#extending-formatting-support) 54 | - Figure out how to toggle between editors without saving and without showing a popup prompt 55 | - [https://github.com/microsoft/vscode/issues/169921](https://github.com/microsoft/vscode/issues/169921) 56 | - Improve support for keyboard shortcuts, eg. the shortcut should automatically appear in brackets when hovering the toolbar button 57 | - [https://ckeditor.com/docs/ckeditor5/latest/framework/guides/plugins/abbreviation-plugin/abbreviation-plugin-level-1.html](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/plugins/abbreviation-plugin/abbreviation-plugin-level-1.html) 58 | - How does it work for built in shortcuts?  [https://github.com/ckeditor/ckeditor5/blob/7dea975058cfa1bd0c6b6b42a96187c3706547d9/packages/ckeditor5-basic-styles/src/bold/boldui.ts#L41](https://github.com/ckeditor/ckeditor5/blob/7dea975058cfa1bd0c6b6b42a96187c3706547d9/packages/ckeditor5-basic-styles/src/bold/boldui.ts#L41) 59 | - Fix the following markdown not being shown as bullets 60 | 61 | ``` 62 | - one 63 | 64 | - two 65 | - three 66 | ``` 67 | 68 | - Don't clear undo history on save 69 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # About 2 | 3 | Seamlessly view and edit your markdown documents in a single tab! This extension provides a WYSIWYG editor for markdown (`.md`) files. 4 | 5 | ![](https://imgur.com/1v8CdQD.gif) 6 | 7 | # Features 8 | 9 | - All standard markdown features are supported 10 | - Quickly switch between WYSIWYG and plain text mode 11 | - Inherits your VS Code color theme 12 | - Same style as built in markdown preview 13 | - Copy/paste rich text content 14 | - Tables, images, code snippets, links, and more… 15 | 16 | # Hotkeys 17 | 18 | | Hotkey | Description | 19 | | ------------ | --------------------------------------------------------------------------------------- | 20 | | Ctrl+Shift+E | Toggle between WYSIWYG and Plain Text editor for the currently active markdown document | 21 | -------------------------------------------------------------------------------- /ckeditor5-build-markdown/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "pwa-chrome", 9 | "request": "launch", 10 | "name": "Launch Chrome against localhost", 11 | "url": "http://localhost:8080", 12 | "webRoot": "${workspaceFolder}" 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /ckeditor5-build-markdown/README.md: -------------------------------------------------------------------------------- 1 | This subfolder is based off this guide: 2 | 3 | - [https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html#scenario-2-building-from-source](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html#scenario-2-building-from-source) 4 | 5 | Using this as a template: 6 | 7 | - [https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-build-classic](https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-build-classic) 8 | - [https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-theme-lark](https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-theme-lark) 9 | 10 | Any changes to the CKEditor5 editor need to be built by running `npm build` in this folder. The root extension code webview reads `ckeditor.js` from the build folder output. 11 | 12 | `npm start` was enabled using code from this PR [https://github.com/ckeditor/ckeditor5/pull/10130/files](https://github.com/ckeditor/ckeditor5/pull/10130/files) 13 | 14 | Reference 15 | 16 | - [https://ckeditor.com/docs/ckeditor5/latest/features/markdown.html](https://ckeditor.com/docs/ckeditor5/latest/features/markdown.html) 17 | - [https://github.github.com/gfm/](https://github.github.com/gfm/) 18 | -------------------------------------------------------------------------------- /ckeditor5-build-markdown/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "./build/ckeditor.js", 3 | "files": [ 4 | "build" 5 | ], 6 | "dependencies": { 7 | "@ckeditor/ckeditor5-adapter-ckfinder": "^35.1.0", 8 | "@ckeditor/ckeditor5-alignment": "^35.1.0", 9 | "@ckeditor/ckeditor5-autoformat": "^35.1.0", 10 | "@ckeditor/ckeditor5-basic-styles": "^35.1.0", 11 | "@ckeditor/ckeditor5-block-quote": "^35.1.0", 12 | "@ckeditor/ckeditor5-ckfinder": "^35.1.0", 13 | "@ckeditor/ckeditor5-clipboard": "^35.1.0", 14 | "@ckeditor/ckeditor5-cloud-services": "^35.1.0", 15 | "@ckeditor/ckeditor5-code-block": "^35.1.0", 16 | "@ckeditor/ckeditor5-easy-image": "^35.1.0", 17 | "@ckeditor/ckeditor5-editor-classic": "^35.1.0", 18 | "@ckeditor/ckeditor5-essentials": "^35.1.0", 19 | "@ckeditor/ckeditor5-font": "^35.1.0", 20 | "@ckeditor/ckeditor5-heading": "^35.1.0", 21 | "@ckeditor/ckeditor5-horizontal-line": "^35.1.0", 22 | "@ckeditor/ckeditor5-image": "^35.1.0", 23 | "@ckeditor/ckeditor5-indent": "^35.1.0", 24 | "@ckeditor/ckeditor5-link": "^35.1.0", 25 | "@ckeditor/ckeditor5-list": "^35.1.0", 26 | "@ckeditor/ckeditor5-markdown-gfm": "^35.1.0", 27 | "@ckeditor/ckeditor5-media-embed": "^35.1.0", 28 | "@ckeditor/ckeditor5-paragraph": "^35.1.0", 29 | "@ckeditor/ckeditor5-paste-from-office": "^35.1.0", 30 | "@ckeditor/ckeditor5-source-editing": "^35.1.0", 31 | "@ckeditor/ckeditor5-special-characters": "^35.1.0", 32 | "@ckeditor/ckeditor5-table": "^35.1.0", 33 | "@ckeditor/ckeditor5-typing": "^35.1.0", 34 | "@ckeditor/ckeditor5-utils": "^35.1.0" 35 | }, 36 | "devDependencies": { 37 | "@ckeditor/ckeditor5-core": "^35.1.0", 38 | "@ckeditor/ckeditor5-dev-utils": "^27.1.0", 39 | "@ckeditor/ckeditor5-dev-webpack-plugin": "^27.1.0", 40 | "@ckeditor/ckeditor5-theme-lark": "^35.1.0", 41 | "css-loader": "^5.2.7", 42 | "postcss-loader": "^4.3.0", 43 | "raw-loader": "^4.0.1", 44 | "style-loader": "^2.0.0", 45 | "terser-webpack-plugin": "^4.2.3", 46 | "webpack": "^5.58.1", 47 | "webpack-cli": "^4.9.1", 48 | "webpack-dev-server": "^4.7.2" 49 | }, 50 | "engines": { 51 | "node": ">=14.0.0", 52 | "npm": ">=5.7.1" 53 | }, 54 | "scripts": { 55 | "start": "webpack-dev-server --mode development", 56 | "build": "webpack --mode production", 57 | "preversion": "npm run build" 58 | } 59 | } -------------------------------------------------------------------------------- /ckeditor5-build-markdown/sample/example.md: -------------------------------------------------------------------------------- 1 | ## Tables 2 | 3 | | Option | Description | 4 | | --- | --- | 5 | | foo | Lorem ipsum dolor sit amet, | 6 | | bar | Ut enim ad minim veniam, quis nostrud exercitation ullamco. | 7 | | baz | Excepteur sint occaecat cupidatat non proident. | 8 | | foo | Lorem ipsum dolor sit amet, | 9 | | bar | Ut enim ad minim veniam, quis nostrud exercitation ullamco. | 10 | | baz | Excepteur sint occaecat cupidatat non proident. | 11 | 12 | ## Headings 13 | 14 | # h1 Heading 15 | 16 | ## h2 Heading 17 | 18 | ### h3 Heading 19 | 20 | #### h4 Heading 21 | 22 | ##### h5 Heading 23 | 24 | ###### h6 Heading 25 | 26 | ## Horizontal Rule 27 | 28 | --- 29 | ## Code Block 30 | 31 | ```typescript 32 | @Controller("cats") 33 | export class CatsController { 34 | @Get() 35 | findAll(@Req() request: Request): string { 36 | return "This action returns all cats"; 37 | } 38 | } 39 | ``` 40 | ```typescript 41 | @Controller("cats") 42 | export class CatsController { 43 | @Get() 44 | findAll(@Req() request: Request): string { 45 | return "This action returns all cats"; 46 | } 47 | } 48 | ``` 49 | 50 | ## Emphasis 51 | 52 | **This is bold text** 53 | 54 | **This is bold text** 55 | 56 | _This is italic text_ 57 | 58 | _This is italic text_ 59 | 60 | ~Strikethrough~ 61 | 62 | ## Blockquotes 63 | 64 | > Blockquotes can also be nested... 65 | > 66 | > > ...by using greater-than signs right next to each other... 67 | > > 68 | > > > ...or with spaces between arrows. 69 | 70 | ## Links 71 | 72 | [example](https://example.com) 73 | 74 | [example link with hover](https://example.com) 75 | 76 | [https://example.com/](https://example.com/) 77 | 78 | ## Lists 79 | 80 | Unordered 81 | 82 | * Create a list by starting a line with `+`, `-`, or `*`. Here is a longer `code snippet` and another one `npm install some-package` 83 | * Sub-lists are made by indenting 2 spaces: 84 | * Ac tristique libero volutpat at 85 | * Facilisis in pretium nisl aliquet 86 | * Nulla volutpat aliquam velit 87 | * Very easy! 88 | 89 | Ordered 90 | 91 | 1. Lorem ipsum dolor sit amet 92 | 2. Consectetur adipiscing elit 93 | 3. Integer molestie lorem at massa 94 | 95 | ## Code 96 | 97 | Indented code 98 | 99 | ``` 100 | line 1 of code 101 | line 2 of code 102 | line 3 of code 103 | ``` 104 | 105 | Block code with backticks 106 | 107 | ``` 108 | line 1 of code 109 | line 2 of code 110 | line 3 of code 111 | ``` 112 | 113 | ## Tables 114 | 115 | | Option | Description | 116 | | --- | --- | 117 | | foo | Lorem ipsum dolor sit amet, | 118 | | bar | Ut enim ad minim veniam, quis nostrud exercitation ullamco. | 119 | | baz | Excepteur sint occaecat cupidatat non proident. | 120 | 121 | ## Images 122 | 123 | ![Minion](https://octodex.github.com/images/original.png) -------------------------------------------------------------------------------- /ckeditor5-build-markdown/sample/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CKEditor 5 Markdown Editor 6 | 7 | 8 | 9 |
10 | 11 | 12 |
13 |
14 | 15 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /ckeditor5-build-markdown/sample/sample-colors-dark.css: -------------------------------------------------------------------------------- 1 | /* 2 | These all get automatically set by VS Code in extension web views. 3 | I only have them here to use in the sample HTML pages to see how it would look in VS Code*/ 4 | 5 | :root, 6 | body { 7 | color: var(--vscode-editor-foreground); 8 | font-family: var(--vscode-font-family); 9 | font-weight: var(--vscode-font-weight); 10 | font-size: var(--vscode-font-size); 11 | } 12 | code { 13 | color: var(--vscode-textPreformat-foreground); 14 | } 15 | 16 | th { 17 | display: table-cell; 18 | vertical-align: inherit; 19 | } 20 | 21 | /* These css variables are copy/pasted from VS Code devtools with dark theme enabled */ 22 | :root { 23 | 24 | --markdown-font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", system-ui, "Ubuntu", "Droid Sans", sans-serif; 25 | --markdown-font-size: 14px; 26 | --markdown-line-height: 1.6; 27 | --vscode-font-family: "Segoe WPC", "Segoe UI", sans-serif; 28 | --vscode-font-weight: normal; 29 | --vscode-font-size: 13px; 30 | --vscode-editor-font-family: Consolas, "Courier New", monospace; 31 | --vscode-editor-font-weight: normal; 32 | --vscode-editor-font-size: 14px; 33 | --vscode-foreground: #cccccc; 34 | --vscode-disabledForeground: rgba(204, 204, 204, 0.5); 35 | --vscode-errorForeground: #f48771; 36 | --vscode-descriptionForeground: rgba(204, 204, 204, 0.7); 37 | --vscode-icon-foreground: #c5c5c5; 38 | --vscode-focusBorder: #007fd4; 39 | --vscode-textSeparator-foreground: rgba(255, 255, 255, 0.18); 40 | --vscode-textLink-foreground: #3794ff; 41 | --vscode-textLink-activeForeground: #3794ff; 42 | --vscode-textPreformat-foreground: #d7ba7d; 43 | --vscode-textBlockQuote-background: rgba(127, 127, 127, 0.1); 44 | --vscode-textBlockQuote-border: rgba(0, 122, 204, 0.5); 45 | --vscode-textCodeBlock-background: rgba(10, 10, 10, 0.4); 46 | --vscode-widget-shadow: rgba(0, 0, 0, 0.36); 47 | --vscode-input-background: #3c3c3c; 48 | --vscode-input-foreground: #cccccc; 49 | --vscode-inputOption-activeBorder: rgba(0, 122, 204, 0); 50 | --vscode-inputOption-hoverBackground: rgba(90, 93, 94, 0.5); 51 | --vscode-inputOption-activeBackground: rgba(0, 127, 212, 0.4); 52 | --vscode-inputOption-activeForeground: #ffffff; 53 | --vscode-input-placeholderForeground: #a6a6a6; 54 | --vscode-inputValidation-infoBackground: #063b49; 55 | --vscode-inputValidation-infoBorder: #007acc; 56 | --vscode-inputValidation-warningBackground: #352a05; 57 | --vscode-inputValidation-warningBorder: #b89500; 58 | --vscode-inputValidation-errorBackground: #5a1d1d; 59 | --vscode-inputValidation-errorBorder: #be1100; 60 | --vscode-dropdown-background: #3c3c3c; 61 | --vscode-dropdown-foreground: #f0f0f0; 62 | --vscode-dropdown-border: #3c3c3c; 63 | --vscode-checkbox-background: #3c3c3c; 64 | --vscode-checkbox-foreground: #f0f0f0; 65 | --vscode-checkbox-border: #3c3c3c; 66 | --vscode-button-foreground: #ffffff; 67 | --vscode-button-background: #0e639c; 68 | --vscode-button-hoverBackground: #1177bb; 69 | --vscode-button-secondaryForeground: #ffffff; 70 | --vscode-button-secondaryBackground: #3a3d41; 71 | --vscode-button-secondaryHoverBackground: #45494e; 72 | --vscode-badge-background: #4d4d4d; 73 | --vscode-badge-foreground: #ffffff; 74 | --vscode-scrollbar-shadow: #000000; 75 | --vscode-scrollbarSlider-background: rgba(121, 121, 121, 0.4); 76 | --vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7); 77 | --vscode-scrollbarSlider-activeBackground: rgba(191, 191, 191, 0.4); 78 | --vscode-progressBar-background: #0e70c0; 79 | --vscode-editorError-foreground: #f14c4c; 80 | --vscode-editorWarning-foreground: #cca700; 81 | --vscode-editorInfo-foreground: #3794ff; 82 | --vscode-editorHint-foreground: rgba(238, 238, 238, 0.7); 83 | --vscode-sash-hoverBorder: #007fd4; 84 | --vscode-editor-background: #1e1e1e; 85 | --vscode-editor-foreground: #d4d4d4; 86 | --vscode-editorWidget-background: #252526; 87 | --vscode-editorWidget-foreground: #cccccc; 88 | --vscode-editorWidget-border: #454545; 89 | --vscode-quickInput-background: #252526; 90 | --vscode-quickInput-foreground: #cccccc; 91 | --vscode-quickInputTitle-background: rgba(255, 255, 255, 0.1); 92 | --vscode-pickerGroup-foreground: #3794ff; 93 | --vscode-pickerGroup-border: #3f3f46; 94 | --vscode-keybindingLabel-background: rgba(128, 128, 128, 0.17); 95 | --vscode-keybindingLabel-foreground: #cccccc; 96 | --vscode-keybindingLabel-border: rgba(51, 51, 51, 0.6); 97 | --vscode-keybindingLabel-bottomBorder: rgba(68, 68, 68, 0.6); 98 | --vscode-editor-selectionBackground: #264f78; 99 | --vscode-editor-inactiveSelectionBackground: #3a3d41; 100 | --vscode-editor-selectionHighlightBackground: rgba(173, 214, 255, 0.15); 101 | --vscode-editor-findMatchBackground: #515c6a; 102 | --vscode-editor-findMatchHighlightBackground: rgba(234, 92, 0, 0.33); 103 | --vscode-editor-findRangeHighlightBackground: rgba(58, 61, 65, 0.4); 104 | --vscode-searchEditor-findMatchBackground: rgba(234, 92, 0, 0.22); 105 | --vscode-editor-hoverHighlightBackground: rgba(38, 79, 120, 0.25); 106 | --vscode-editorHoverWidget-background: #252526; 107 | --vscode-editorHoverWidget-foreground: #cccccc; 108 | --vscode-editorHoverWidget-border: #454545; 109 | --vscode-editorHoverWidget-statusBarBackground: #2c2c2d; 110 | --vscode-editorLink-activeForeground: #4e94ce; 111 | --vscode-editorInlayHint-foreground: rgba(255, 255, 255, 0.8); 112 | --vscode-editorInlayHint-background: rgba(77, 77, 77, 0.6); 113 | --vscode-editorInlayHint-typeForeground: rgba(255, 255, 255, 0.8); 114 | --vscode-editorInlayHint-typeBackground: rgba(77, 77, 77, 0.6); 115 | --vscode-editorInlayHint-parameterForeground: rgba(255, 255, 255, 0.8); 116 | --vscode-editorInlayHint-parameterBackground: rgba(77, 77, 77, 0.6); 117 | --vscode-editorLightBulb-foreground: #ffcc00; 118 | --vscode-editorLightBulbAutoFix-foreground: #75beff; 119 | --vscode-diffEditor-insertedTextBackground: rgba(155, 185, 85, 0.2); 120 | --vscode-diffEditor-removedTextBackground: rgba(255, 0, 0, 0.2); 121 | --vscode-diffEditor-diagonalFill: rgba(204, 204, 204, 0.2); 122 | --vscode-list-focusOutline: #007fd4; 123 | --vscode-list-activeSelectionBackground: #094771; 124 | --vscode-list-activeSelectionForeground: #ffffff; 125 | --vscode-list-activeSelectionIconForeground: #ffffff; 126 | --vscode-list-inactiveSelectionBackground: #37373d; 127 | --vscode-list-hoverBackground: #2a2d2e; 128 | --vscode-list-dropBackground: #383b3d; 129 | --vscode-list-highlightForeground: #18a3ff; 130 | --vscode-list-focusHighlightForeground: #18a3ff; 131 | --vscode-list-invalidItemForeground: #b89500; 132 | --vscode-list-errorForeground: #f88070; 133 | --vscode-list-warningForeground: #cca700; 134 | --vscode-listFilterWidget-background: #653723; 135 | --vscode-listFilterWidget-outline: rgba(0, 0, 0, 0); 136 | --vscode-listFilterWidget-noMatchesOutline: #be1100; 137 | --vscode-list-filterMatchBackground: rgba(234, 92, 0, 0.33); 138 | --vscode-tree-indentGuidesStroke: #585858; 139 | --vscode-tree-tableColumnsBorder: rgba(204, 204, 204, 0.13); 140 | --vscode-tree-tableOddRowsBackground: rgba(204, 204, 204, 0.04); 141 | --vscode-list-deemphasizedForeground: #8c8c8c; 142 | --vscode-quickInputList-focusForeground: #ffffff; 143 | --vscode-quickInputList-focusIconForeground: #ffffff; 144 | --vscode-quickInputList-focusBackground: #094771; 145 | --vscode-menu-foreground: #cccccc; 146 | --vscode-menu-background: #303031; 147 | --vscode-menu-selectionForeground: #ffffff; 148 | --vscode-menu-selectionBackground: #094771; 149 | --vscode-menu-separatorBackground: #606060; 150 | --vscode-toolbar-hoverBackground: rgba(90, 93, 94, 0.31); 151 | --vscode-toolbar-activeBackground: rgba(99, 102, 103, 0.31); 152 | --vscode-editor-snippetTabstopHighlightBackground: rgba(124, 124, 124, 0.3); 153 | --vscode-editor-snippetFinalTabstopHighlightBorder: #525252; 154 | --vscode-breadcrumb-foreground: rgba(204, 204, 204, 0.8); 155 | --vscode-breadcrumb-background: #1e1e1e; 156 | --vscode-breadcrumb-focusForeground: #e0e0e0; 157 | --vscode-breadcrumb-activeSelectionForeground: #e0e0e0; 158 | --vscode-breadcrumbPicker-background: #252526; 159 | --vscode-merge-currentHeaderBackground: rgba(64, 200, 174, 0.5); 160 | --vscode-merge-currentContentBackground: rgba(64, 200, 174, 0.2); 161 | --vscode-merge-incomingHeaderBackground: rgba(64, 166, 255, 0.5); 162 | --vscode-merge-incomingContentBackground: rgba(64, 166, 255, 0.2); 163 | --vscode-merge-commonHeaderBackground: rgba(96, 96, 96, 0.4); 164 | --vscode-merge-commonContentBackground: rgba(96, 96, 96, 0.16); 165 | --vscode-editorOverviewRuler-currentContentForeground: rgba(64, 200, 174, 0.5); 166 | --vscode-editorOverviewRuler-incomingContentForeground: rgba(64, 166, 255, 0.5); 167 | --vscode-editorOverviewRuler-commonContentForeground: rgba(96, 96, 96, 0.4); 168 | --vscode-editorOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49); 169 | --vscode-editorOverviewRuler-selectionHighlightForeground: rgba(160, 160, 160, 0.8); 170 | --vscode-minimap-findMatchHighlight: #d18616; 171 | --vscode-minimap-selectionOccurrenceHighlight: #676767; 172 | --vscode-minimap-selectionHighlight: #264f78; 173 | --vscode-minimap-errorHighlight: rgba(255, 18, 18, 0.7); 174 | --vscode-minimap-warningHighlight: #cca700; 175 | --vscode-minimap-foregroundOpacity: #000000; 176 | --vscode-minimapSlider-background: rgba(121, 121, 121, 0.2); 177 | --vscode-minimapSlider-hoverBackground: rgba(100, 100, 100, 0.35); 178 | --vscode-minimapSlider-activeBackground: rgba(191, 191, 191, 0.2); 179 | --vscode-problemsErrorIcon-foreground: #f14c4c; 180 | --vscode-problemsWarningIcon-foreground: #cca700; 181 | --vscode-problemsInfoIcon-foreground: #3794ff; 182 | --vscode-charts-foreground: #cccccc; 183 | --vscode-charts-lines: rgba(204, 204, 204, 0.5); 184 | --vscode-charts-red: #f14c4c; 185 | --vscode-charts-blue: #3794ff; 186 | --vscode-charts-yellow: #cca700; 187 | --vscode-charts-orange: #d18616; 188 | --vscode-charts-green: #89d185; 189 | --vscode-charts-purple: #b180d7; 190 | --vscode-editor-lineHighlightBorder: #282828; 191 | --vscode-editor-rangeHighlightBackground: rgba(255, 255, 255, 0.04); 192 | --vscode-editor-symbolHighlightBackground: rgba(234, 92, 0, 0.33); 193 | --vscode-editorCursor-foreground: #aeafad; 194 | --vscode-editorWhitespace-foreground: rgba(227, 228, 226, 0.16); 195 | --vscode-editorIndentGuide-background: #404040; 196 | --vscode-editorIndentGuide-activeBackground: #707070; 197 | --vscode-editorLineNumber-foreground: #858585; 198 | --vscode-editorActiveLineNumber-foreground: #c6c6c6; 199 | --vscode-editorLineNumber-activeForeground: #c6c6c6; 200 | --vscode-editorRuler-foreground: #5a5a5a; 201 | --vscode-editorCodeLens-foreground: #999999; 202 | --vscode-editorBracketMatch-background: rgba(0, 100, 0, 0.1); 203 | --vscode-editorBracketMatch-border: #888888; 204 | --vscode-editorOverviewRuler-border: rgba(127, 127, 127, 0.3); 205 | --vscode-editorGutter-background: #1e1e1e; 206 | --vscode-editorUnnecessaryCode-opacity: rgba(0, 0, 0, 0.67); 207 | --vscode-editorGhostText-foreground: rgba(255, 255, 255, 0.34); 208 | --vscode-editorOverviewRuler-rangeHighlightForeground: rgba(0, 122, 204, 0.6); 209 | --vscode-editorOverviewRuler-errorForeground: rgba(255, 18, 18, 0.7); 210 | --vscode-editorOverviewRuler-warningForeground: #cca700; 211 | --vscode-editorOverviewRuler-infoForeground: #3794ff; 212 | --vscode-editorBracketHighlight-foreground1: #ffd700; 213 | --vscode-editorBracketHighlight-foreground2: #da70d6; 214 | --vscode-editorBracketHighlight-foreground3: #179fff; 215 | --vscode-editorBracketHighlight-foreground4: rgba(0, 0, 0, 0); 216 | --vscode-editorBracketHighlight-foreground5: rgba(0, 0, 0, 0); 217 | --vscode-editorBracketHighlight-foreground6: rgba(0, 0, 0, 0); 218 | --vscode-editorBracketHighlight-unexpectedBracket\.foreground: rgba(255, 18, 18, 0.8); 219 | --vscode-editorBracketPairGuide-background1: rgba(0, 0, 0, 0); 220 | --vscode-editorBracketPairGuide-background2: rgba(0, 0, 0, 0); 221 | --vscode-editorBracketPairGuide-background3: rgba(0, 0, 0, 0); 222 | --vscode-editorBracketPairGuide-background4: rgba(0, 0, 0, 0); 223 | --vscode-editorBracketPairGuide-background5: rgba(0, 0, 0, 0); 224 | --vscode-editorBracketPairGuide-background6: rgba(0, 0, 0, 0); 225 | --vscode-editorBracketPairGuide-activeBackground1: rgba(0, 0, 0, 0); 226 | --vscode-editorBracketPairGuide-activeBackground2: rgba(0, 0, 0, 0); 227 | --vscode-editorBracketPairGuide-activeBackground3: rgba(0, 0, 0, 0); 228 | --vscode-editorBracketPairGuide-activeBackground4: rgba(0, 0, 0, 0); 229 | --vscode-editorBracketPairGuide-activeBackground5: rgba(0, 0, 0, 0); 230 | --vscode-editorBracketPairGuide-activeBackground6: rgba(0, 0, 0, 0); 231 | --vscode-editorUnicodeHighlight-border: #bd9b03; 232 | --vscode-editorUnicodeHighlight-background: rgba(189, 155, 3, 0.15); 233 | --vscode-symbolIcon-arrayForeground: #cccccc; 234 | --vscode-symbolIcon-booleanForeground: #cccccc; 235 | --vscode-symbolIcon-classForeground: #ee9d28; 236 | --vscode-symbolIcon-colorForeground: #cccccc; 237 | --vscode-symbolIcon-constantForeground: #cccccc; 238 | --vscode-symbolIcon-constructorForeground: #b180d7; 239 | --vscode-symbolIcon-enumeratorForeground: #ee9d28; 240 | --vscode-symbolIcon-enumeratorMemberForeground: #75beff; 241 | --vscode-symbolIcon-eventForeground: #ee9d28; 242 | --vscode-symbolIcon-fieldForeground: #75beff; 243 | --vscode-symbolIcon-fileForeground: #cccccc; 244 | --vscode-symbolIcon-folderForeground: #cccccc; 245 | --vscode-symbolIcon-functionForeground: #b180d7; 246 | --vscode-symbolIcon-interfaceForeground: #75beff; 247 | --vscode-symbolIcon-keyForeground: #cccccc; 248 | --vscode-symbolIcon-keywordForeground: #cccccc; 249 | --vscode-symbolIcon-methodForeground: #b180d7; 250 | --vscode-symbolIcon-moduleForeground: #cccccc; 251 | --vscode-symbolIcon-namespaceForeground: #cccccc; 252 | --vscode-symbolIcon-nullForeground: #cccccc; 253 | --vscode-symbolIcon-numberForeground: #cccccc; 254 | --vscode-symbolIcon-objectForeground: #cccccc; 255 | --vscode-symbolIcon-operatorForeground: #cccccc; 256 | --vscode-symbolIcon-packageForeground: #cccccc; 257 | --vscode-symbolIcon-propertyForeground: #cccccc; 258 | --vscode-symbolIcon-referenceForeground: #cccccc; 259 | --vscode-symbolIcon-snippetForeground: #cccccc; 260 | --vscode-symbolIcon-stringForeground: #cccccc; 261 | --vscode-symbolIcon-structForeground: #cccccc; 262 | --vscode-symbolIcon-textForeground: #cccccc; 263 | --vscode-symbolIcon-typeParameterForeground: #cccccc; 264 | --vscode-symbolIcon-unitForeground: #cccccc; 265 | --vscode-symbolIcon-variableForeground: #75beff; 266 | --vscode-editorHoverWidget-highlightForeground: #18a3ff; 267 | --vscode-editorOverviewRuler-bracketMatchForeground: #a0a0a0; 268 | --vscode-editor-foldBackground: rgba(38, 79, 120, 0.3); 269 | --vscode-editorGutter-foldingControlForeground: #c5c5c5; 270 | --vscode-editor-linkedEditingBackground: rgba(255, 0, 0, 0.3); 271 | --vscode-editorSuggestWidget-background: #252526; 272 | --vscode-editorSuggestWidget-border: #454545; 273 | --vscode-editorSuggestWidget-foreground: #d4d4d4; 274 | --vscode-editorSuggestWidget-selectedForeground: #ffffff; 275 | --vscode-editorSuggestWidget-selectedIconForeground: #ffffff; 276 | --vscode-editorSuggestWidget-selectedBackground: #094771; 277 | --vscode-editorSuggestWidget-highlightForeground: #18a3ff; 278 | --vscode-editorSuggestWidget-focusHighlightForeground: #18a3ff; 279 | --vscode-editorSuggestWidgetStatus-foreground: rgba(212, 212, 212, 0.5); 280 | --vscode-editor-wordHighlightBackground: rgba(87, 87, 87, 0.72); 281 | --vscode-editor-wordHighlightStrongBackground: rgba(0, 73, 114, 0.72); 282 | --vscode-editorOverviewRuler-wordHighlightForeground: rgba(160, 160, 160, 0.8); 283 | --vscode-editorOverviewRuler-wordHighlightStrongForeground: rgba(192, 160, 192, 0.8); 284 | --vscode-peekViewTitle-background: rgba(55, 148, 255, 0.1); 285 | --vscode-peekViewTitleLabel-foreground: #ffffff; 286 | --vscode-peekViewTitleDescription-foreground: rgba(204, 204, 204, 0.7); 287 | --vscode-peekView-border: #3794ff; 288 | --vscode-peekViewResult-background: #252526; 289 | --vscode-peekViewResult-lineForeground: #bbbbbb; 290 | --vscode-peekViewResult-fileForeground: #ffffff; 291 | --vscode-peekViewResult-selectionBackground: rgba(51, 153, 255, 0.2); 292 | --vscode-peekViewResult-selectionForeground: #ffffff; 293 | --vscode-peekViewEditor-background: #001f33; 294 | --vscode-peekViewEditorGutter-background: #001f33; 295 | --vscode-peekViewResult-matchHighlightBackground: rgba(234, 92, 0, 0.3); 296 | --vscode-peekViewEditor-matchHighlightBackground: rgba(255, 143, 0, 0.6); 297 | --vscode-editorMarkerNavigationError-background: #f14c4c; 298 | --vscode-editorMarkerNavigationError-headerBackground: rgba(241, 76, 76, 0.1); 299 | --vscode-editorMarkerNavigationWarning-background: #cca700; 300 | --vscode-editorMarkerNavigationWarning-headerBackground: rgba(204, 167, 0, 0.1); 301 | --vscode-editorMarkerNavigationInfo-background: #3794ff; 302 | --vscode-editorMarkerNavigationInfo-headerBackground: rgba(55, 148, 255, 0.1); 303 | --vscode-editorMarkerNavigation-background: #1e1e1e; 304 | --vscode-tab-activeBackground: #1e1e1e; 305 | --vscode-tab-unfocusedActiveBackground: #1e1e1e; 306 | --vscode-tab-inactiveBackground: #2d2d2d; 307 | --vscode-tab-unfocusedInactiveBackground: #2d2d2d; 308 | --vscode-tab-activeForeground: #ffffff; 309 | --vscode-tab-inactiveForeground: rgba(255, 255, 255, 0.5); 310 | --vscode-tab-unfocusedActiveForeground: rgba(255, 255, 255, 0.5); 311 | --vscode-tab-unfocusedInactiveForeground: rgba(255, 255, 255, 0.25); 312 | --vscode-tab-border: #252526; 313 | --vscode-tab-lastPinnedBorder: rgba(204, 204, 204, 0.2); 314 | --vscode-tab-activeModifiedBorder: #3399cc; 315 | --vscode-tab-inactiveModifiedBorder: rgba(51, 153, 204, 0.5); 316 | --vscode-tab-unfocusedActiveModifiedBorder: rgba(51, 153, 204, 0.5); 317 | --vscode-tab-unfocusedInactiveModifiedBorder: rgba(51, 153, 204, 0.25); 318 | --vscode-editorPane-background: #1e1e1e; 319 | --vscode-editorGroupHeader-tabsBackground: #252526; 320 | --vscode-editorGroupHeader-noTabsBackground: #1e1e1e; 321 | --vscode-editorGroup-border: #444444; 322 | --vscode-editorGroup-dropBackground: rgba(83, 89, 93, 0.5); 323 | --vscode-editorGroup-dropIntoPromptForeground: #cccccc; 324 | --vscode-editorGroup-dropIntoPromptBackground: #252526; 325 | --vscode-sideBySideEditor-horizontalBorder: #444444; 326 | --vscode-sideBySideEditor-verticalBorder: #444444; 327 | --vscode-panel-background: #1e1e1e; 328 | --vscode-panel-border: rgba(128, 128, 128, 0.35); 329 | --vscode-panelTitle-activeForeground: #e7e7e7; 330 | --vscode-panelTitle-inactiveForeground: rgba(231, 231, 231, 0.6); 331 | --vscode-panelTitle-activeBorder: #e7e7e7; 332 | --vscode-panel-dropBorder: #e7e7e7; 333 | --vscode-panelSection-dropBackground: rgba(83, 89, 93, 0.5); 334 | --vscode-panelSectionHeader-background: rgba(128, 128, 128, 0.2); 335 | --vscode-panelSection-border: rgba(128, 128, 128, 0.35); 336 | --vscode-banner-background: #094771; 337 | --vscode-banner-foreground: #ffffff; 338 | --vscode-banner-iconForeground: #3794ff; 339 | --vscode-statusBar-foreground: #ffffff; 340 | --vscode-statusBar-noFolderForeground: #ffffff; 341 | --vscode-statusBar-background: #007acc; 342 | --vscode-statusBar-noFolderBackground: #68217a; 343 | --vscode-statusBar-focusBorder: #ffffff; 344 | --vscode-statusBarItem-activeBackground: rgba(255, 255, 255, 0.18); 345 | --vscode-statusBarItem-focusBorder: #ffffff; 346 | --vscode-statusBarItem-hoverBackground: rgba(255, 255, 255, 0.12); 347 | --vscode-statusBarItem-compactHoverBackground: rgba(255, 255, 255, 0.2); 348 | --vscode-statusBarItem-prominentForeground: #ffffff; 349 | --vscode-statusBarItem-prominentBackground: rgba(0, 0, 0, 0.5); 350 | --vscode-statusBarItem-prominentHoverBackground: rgba(0, 0, 0, 0.3); 351 | --vscode-statusBarItem-errorBackground: #c72e0f; 352 | --vscode-statusBarItem-errorForeground: #ffffff; 353 | --vscode-statusBarItem-warningBackground: #7a6400; 354 | --vscode-statusBarItem-warningForeground: #ffffff; 355 | --vscode-activityBar-background: #333333; 356 | --vscode-activityBar-foreground: #ffffff; 357 | --vscode-activityBar-inactiveForeground: rgba(255, 255, 255, 0.4); 358 | --vscode-activityBar-activeBorder: #ffffff; 359 | --vscode-activityBar-dropBorder: #ffffff; 360 | --vscode-activityBarBadge-background: #007acc; 361 | --vscode-activityBarBadge-foreground: #ffffff; 362 | --vscode-statusBarItem-remoteBackground: #16825d; 363 | --vscode-statusBarItem-remoteForeground: #ffffff; 364 | --vscode-extensionBadge-remoteBackground: #007acc; 365 | --vscode-extensionBadge-remoteForeground: #ffffff; 366 | --vscode-sideBar-background: #252526; 367 | --vscode-sideBarTitle-foreground: #bbbbbb; 368 | --vscode-sideBar-dropBackground: rgba(83, 89, 93, 0.5); 369 | --vscode-sideBarSectionHeader-background: rgba(0, 0, 0, 0); 370 | --vscode-sideBarSectionHeader-border: rgba(204, 204, 204, 0.2); 371 | --vscode-titleBar-activeForeground: #cccccc; 372 | --vscode-titleBar-inactiveForeground: rgba(204, 204, 204, 0.6); 373 | --vscode-titleBar-activeBackground: #3c3c3c; 374 | --vscode-titleBar-inactiveBackground: rgba(60, 60, 60, 0.6); 375 | --vscode-menubar-selectionForeground: #cccccc; 376 | --vscode-menubar-selectionBackground: rgba(90, 93, 94, 0.31); 377 | --vscode-notifications-foreground: #cccccc; 378 | --vscode-notifications-background: #252526; 379 | --vscode-notificationLink-foreground: #3794ff; 380 | --vscode-notificationCenterHeader-background: #303031; 381 | --vscode-notifications-border: #303031; 382 | --vscode-notificationsErrorIcon-foreground: #f14c4c; 383 | --vscode-notificationsWarningIcon-foreground: #cca700; 384 | --vscode-notificationsInfoIcon-foreground: #3794ff; 385 | --vscode-editorCommentsWidget-resolvedBorder: rgba(204, 204, 204, 0.5); 386 | --vscode-editorCommentsWidget-unresolvedBorder: #3794ff; 387 | --vscode-editorCommentsWidget-rangeBackground: rgba(55, 148, 255, 0.1); 388 | --vscode-editorCommentsWidget-rangeBorder: rgba(55, 148, 255, 0.4); 389 | --vscode-editorCommentsWidget-rangeActiveBackground: rgba(55, 148, 255, 0.1); 390 | --vscode-editorCommentsWidget-rangeActiveBorder: rgba(55, 148, 255, 0.4); 391 | --vscode-editorGutter-commentRangeForeground: #c5c5c5; 392 | --vscode-debugToolBar-background: #333333; 393 | --vscode-debugIcon-startForeground: #89d185; 394 | --vscode-editor-stackFrameHighlightBackground: rgba(255, 255, 0, 0.2); 395 | --vscode-editor-focusedStackFrameHighlightBackground: rgba(122, 189, 122, 0.3); 396 | --vscode-settings-headerForeground: #e7e7e7; 397 | --vscode-settings-modifiedItemIndicator: #0c7d9d; 398 | --vscode-settings-headerBorder: rgba(128, 128, 128, 0.35); 399 | --vscode-settings-sashBorder: rgba(128, 128, 128, 0.35); 400 | --vscode-settings-dropdownBackground: #3c3c3c; 401 | --vscode-settings-dropdownForeground: #f0f0f0; 402 | --vscode-settings-dropdownBorder: #3c3c3c; 403 | --vscode-settings-dropdownListBorder: #454545; 404 | --vscode-settings-checkboxBackground: #3c3c3c; 405 | --vscode-settings-checkboxForeground: #f0f0f0; 406 | --vscode-settings-checkboxBorder: #3c3c3c; 407 | --vscode-settings-textInputBackground: #3c3c3c; 408 | --vscode-settings-textInputForeground: #cccccc; 409 | --vscode-settings-numberInputBackground: #3c3c3c; 410 | --vscode-settings-numberInputForeground: #cccccc; 411 | --vscode-settings-focusedRowBackground: rgba(42, 45, 46, 0.6); 412 | --vscode-settings-rowHoverBackground: rgba(42, 45, 46, 0.3); 413 | --vscode-settings-focusedRowBorder: rgba(255, 255, 255, 0.12); 414 | --vscode-terminal-foreground: #cccccc; 415 | --vscode-terminal-selectionBackground: #264f78; 416 | --vscode-terminalCommandDecoration-defaultBackground: rgba(255, 255, 255, 0.25); 417 | --vscode-terminalCommandDecoration-successBackground: #1b81a8; 418 | --vscode-terminalCommandDecoration-errorBackground: #f14c4c; 419 | --vscode-terminalOverviewRuler-cursorForeground: rgba(160, 160, 160, 0.8); 420 | --vscode-terminal-border: rgba(128, 128, 128, 0.35); 421 | --vscode-terminal-findMatchBackground: #515c6a; 422 | --vscode-terminal-findMatchHighlightBackground: rgba(234, 92, 0, 0.33); 423 | --vscode-terminalOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49); 424 | --vscode-terminal-dropBackground: rgba(83, 89, 93, 0.5); 425 | --vscode-testing-iconFailed: #f14c4c; 426 | --vscode-testing-iconErrored: #f14c4c; 427 | --vscode-testing-iconPassed: #73c991; 428 | --vscode-testing-runAction: #73c991; 429 | --vscode-testing-iconQueued: #cca700; 430 | --vscode-testing-iconUnset: #848484; 431 | --vscode-testing-iconSkipped: #848484; 432 | --vscode-testing-peekBorder: #f14c4c; 433 | --vscode-testing-peekHeaderBackground: rgba(241, 76, 76, 0.1); 434 | --vscode-testing-message\.error\.decorationForeground: #f14c4c; 435 | --vscode-testing-message\.error\.lineBackground: rgba(255, 0, 0, 0.2); 436 | --vscode-testing-message\.info\.decorationForeground: rgba(212, 212, 212, 0.5); 437 | --vscode-welcomePage-tileBackground: #252526; 438 | --vscode-welcomePage-tileHoverBackground: #2c2c2d; 439 | --vscode-welcomePage-tileShadow: rgba(0, 0, 0, 0.36); 440 | --vscode-welcomePage-progress\.background: #3c3c3c; 441 | --vscode-welcomePage-progress\.foreground: #3794ff; 442 | --vscode-commandCenter-foreground: #cccccc; 443 | --vscode-commandCenter-activeForeground: #cccccc; 444 | --vscode-commandCenter-activeBackground: rgba(90, 93, 94, 0.31); 445 | --vscode-commandCenter-border: rgba(90, 93, 94, 0.31); 446 | --vscode-debugExceptionWidget-border: #a31515; 447 | --vscode-debugExceptionWidget-background: #420b0d; 448 | --vscode-ports-iconRunningProcessForeground: #369432; 449 | --vscode-statusBar-debuggingBackground: #cc6633; 450 | --vscode-statusBar-debuggingForeground: #ffffff; 451 | --vscode-editor-inlineValuesForeground: rgba(255, 255, 255, 0.5); 452 | --vscode-editor-inlineValuesBackground: rgba(255, 200, 0, 0.2); 453 | --vscode-editorGutter-modifiedBackground: #1b81a8; 454 | --vscode-editorGutter-addedBackground: #487e02; 455 | --vscode-editorGutter-deletedBackground: #f14c4c; 456 | --vscode-minimapGutter-modifiedBackground: #1b81a8; 457 | --vscode-minimapGutter-addedBackground: #487e02; 458 | --vscode-minimapGutter-deletedBackground: #f14c4c; 459 | --vscode-editorOverviewRuler-modifiedForeground: rgba(27, 129, 168, 0.6); 460 | --vscode-editorOverviewRuler-addedForeground: rgba(72, 126, 2, 0.6); 461 | --vscode-editorOverviewRuler-deletedForeground: rgba(241, 76, 76, 0.6); 462 | --vscode-debugIcon-breakpointForeground: #e51400; 463 | --vscode-debugIcon-breakpointDisabledForeground: #848484; 464 | --vscode-debugIcon-breakpointUnverifiedForeground: #848484; 465 | --vscode-debugIcon-breakpointCurrentStackframeForeground: #ffcc00; 466 | --vscode-debugIcon-breakpointStackframeForeground: #89d185; 467 | --vscode-notebook-cellBorderColor: #37373d; 468 | --vscode-notebook-focusedEditorBorder: #007fd4; 469 | --vscode-notebookStatusSuccessIcon-foreground: #89d185; 470 | --vscode-notebookStatusErrorIcon-foreground: #f48771; 471 | --vscode-notebookStatusRunningIcon-foreground: #cccccc; 472 | --vscode-notebook-cellToolbarSeparator: rgba(128, 128, 128, 0.35); 473 | --vscode-notebook-selectedCellBackground: #37373d; 474 | --vscode-notebook-selectedCellBorder: #37373d; 475 | --vscode-notebook-focusedCellBorder: #007fd4; 476 | --vscode-notebook-inactiveFocusedCellBorder: #37373d; 477 | --vscode-notebook-cellStatusBarItemHoverBackground: rgba(255, 255, 255, 0.15); 478 | --vscode-notebook-cellInsertionIndicator: #007fd4; 479 | --vscode-notebookScrollbarSlider-background: rgba(121, 121, 121, 0.4); 480 | --vscode-notebookScrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7); 481 | --vscode-notebookScrollbarSlider-activeBackground: rgba(191, 191, 191, 0.4); 482 | --vscode-notebook-symbolHighlightBackground: rgba(255, 255, 255, 0.04); 483 | --vscode-notebook-cellEditorBackground: #252526; 484 | --vscode-keybindingTable-headerBackground: rgba(204, 204, 204, 0.04); 485 | --vscode-keybindingTable-rowsBackground: rgba(204, 204, 204, 0.04); 486 | --vscode-scm-providerBorder: #454545; 487 | --vscode-debugTokenExpression-name: #c586c0; 488 | --vscode-debugTokenExpression-value: rgba(204, 204, 204, 0.6); 489 | --vscode-debugTokenExpression-string: #ce9178; 490 | --vscode-debugTokenExpression-boolean: #4e94ce; 491 | --vscode-debugTokenExpression-number: #b5cea8; 492 | --vscode-debugTokenExpression-error: #f48771; 493 | --vscode-debugView-exceptionLabelForeground: #cccccc; 494 | --vscode-debugView-exceptionLabelBackground: #6c2022; 495 | --vscode-debugView-stateLabelForeground: #cccccc; 496 | --vscode-debugView-stateLabelBackground: rgba(136, 136, 136, 0.27); 497 | --vscode-debugView-valueChangedHighlight: #569cd6; 498 | --vscode-debugConsole-infoForeground: #3794ff; 499 | --vscode-debugConsole-warningForeground: #cca700; 500 | --vscode-debugConsole-errorForeground: #f48771; 501 | --vscode-debugConsole-sourceForeground: #cccccc; 502 | --vscode-debugConsoleInputIcon-foreground: #cccccc; 503 | --vscode-debugIcon-pauseForeground: #75beff; 504 | --vscode-debugIcon-stopForeground: #f48771; 505 | --vscode-debugIcon-disconnectForeground: #f48771; 506 | --vscode-debugIcon-restartForeground: #89d185; 507 | --vscode-debugIcon-stepOverForeground: #75beff; 508 | --vscode-debugIcon-stepIntoForeground: #75beff; 509 | --vscode-debugIcon-stepOutForeground: #75beff; 510 | --vscode-debugIcon-continueForeground: #75beff; 511 | --vscode-debugIcon-stepBackForeground: #75beff; 512 | --vscode-extensionButton-prominentBackground: #0e639c; 513 | --vscode-extensionButton-prominentForeground: #ffffff; 514 | --vscode-extensionButton-prominentHoverBackground: #1177bb; 515 | --vscode-extensionSponsorButton-background: #b51e78; 516 | --vscode-extensionSponsorButton-hoverBackground: #d61b8c; 517 | --vscode-extensionIcon-starForeground: #ff8e00; 518 | --vscode-extensionIcon-verifiedForeground: #3794ff; 519 | --vscode-extensionIcon-preReleaseForeground: #1d9271; 520 | --vscode-terminal-ansiBlack: #000000; 521 | --vscode-terminal-ansiRed: #cd3131; 522 | --vscode-terminal-ansiGreen: #0dbc79; 523 | --vscode-terminal-ansiYellow: #e5e510; 524 | --vscode-terminal-ansiBlue: #2472c8; 525 | --vscode-terminal-ansiMagenta: #bc3fbc; 526 | --vscode-terminal-ansiCyan: #11a8cd; 527 | --vscode-terminal-ansiWhite: #e5e5e5; 528 | --vscode-terminal-ansiBrightBlack: #666666; 529 | --vscode-terminal-ansiBrightRed: #f14c4c; 530 | --vscode-terminal-ansiBrightGreen: #23d18b; 531 | --vscode-terminal-ansiBrightYellow: #f5f543; 532 | --vscode-terminal-ansiBrightBlue: #3b8eea; 533 | --vscode-terminal-ansiBrightMagenta: #d670d6; 534 | --vscode-terminal-ansiBrightCyan: #29b8db; 535 | --vscode-terminal-ansiBrightWhite: #e5e5e5; 536 | --vscode-interactive-activeCodeBorder: #3794ff; 537 | --vscode-interactive-inactiveCodeBorder: #37373d; 538 | --vscode-gitDecoration-addedResourceForeground: #81b88b; 539 | --vscode-gitDecoration-modifiedResourceForeground: #e2c08d; 540 | --vscode-gitDecoration-deletedResourceForeground: #c74e39; 541 | --vscode-gitDecoration-renamedResourceForeground: #73c991; 542 | --vscode-gitDecoration-untrackedResourceForeground: #73c991; 543 | --vscode-gitDecoration-ignoredResourceForeground: #8c8c8c; 544 | --vscode-gitDecoration-stageModifiedResourceForeground: #e2c08d; 545 | --vscode-gitDecoration-stageDeletedResourceForeground: #c74e39; 546 | --vscode-gitDecoration-conflictingResourceForeground: #e4676b; 547 | --vscode-gitDecoration-submoduleResourceForeground: #8db9e2; 548 | } 549 | 550 | -------------------------------------------------------------------------------- /ckeditor5-build-markdown/sample/sample-colors-light.css: -------------------------------------------------------------------------------- 1 | /* 2 | These all get automatically set by VS Code in extension web views. 3 | I only have them here to use in the sample HTML pages to see how it would look in VS Code*/ 4 | 5 | :root, 6 | body { 7 | color: var(--vscode-editor-foreground); 8 | font-family: var(--vscode-font-family); 9 | font-weight: var(--vscode-font-weight); 10 | font-size: var(--vscode-font-size); 11 | } 12 | code { 13 | color: var(--vscode-textPreformat-foreground); 14 | } 15 | 16 | th { 17 | display: table-cell; 18 | vertical-align: inherit; 19 | } 20 | 21 | /* These css variables are copy/pasted from VS Code devtools with light theme enabled */ 22 | :root { 23 | --markdown-font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", system-ui, "Ubuntu", "Droid Sans", sans-serif; 24 | --markdown-font-size: 14px; 25 | --markdown-line-height: 1.6; 26 | --vscode-font-family: "Segoe WPC", "Segoe UI", sans-serif; 27 | --vscode-font-weight: normal; 28 | --vscode-font-size: 13px; 29 | --vscode-editor-font-family: Consolas, "Courier New", monospace; 30 | --vscode-editor-font-weight: normal; 31 | --vscode-editor-font-size: 14px; 32 | --vscode-foreground: #616161; 33 | --vscode-disabledForeground: rgba(97, 97, 97, 0.5); 34 | --vscode-errorForeground: #a1260d; 35 | --vscode-descriptionForeground: #717171; 36 | --vscode-icon-foreground: #424242; 37 | --vscode-focusBorder: #0090f1; 38 | --vscode-textSeparator-foreground: rgba(0, 0, 0, 0.18); 39 | --vscode-textLink-foreground: #006ab1; 40 | --vscode-textLink-activeForeground: #006ab1; 41 | --vscode-textPreformat-foreground: #a31515; 42 | --vscode-textBlockQuote-background: rgba(127, 127, 127, 0.1); 43 | --vscode-textBlockQuote-border: rgba(0, 122, 204, 0.5); 44 | --vscode-textCodeBlock-background: rgba(220, 220, 220, 0.4); 45 | --vscode-widget-shadow: rgba(0, 0, 0, 0.16); 46 | --vscode-input-background: #ffffff; 47 | --vscode-input-foreground: #616161; 48 | --vscode-inputOption-activeBorder: rgba(0, 122, 204, 0); 49 | --vscode-inputOption-hoverBackground: rgba(184, 184, 184, 0.31); 50 | --vscode-inputOption-activeBackground: rgba(0, 144, 241, 0.2); 51 | --vscode-inputOption-activeForeground: #000000; 52 | --vscode-input-placeholderForeground: #767676; 53 | --vscode-inputValidation-infoBackground: #d6ecf2; 54 | --vscode-inputValidation-infoBorder: #007acc; 55 | --vscode-inputValidation-warningBackground: #f6f5d2; 56 | --vscode-inputValidation-warningBorder: #b89500; 57 | --vscode-inputValidation-errorBackground: #f2dede; 58 | --vscode-inputValidation-errorBorder: #be1100; 59 | --vscode-dropdown-background: #ffffff; 60 | --vscode-dropdown-border: #cecece; 61 | --vscode-checkbox-background: #ffffff; 62 | --vscode-checkbox-border: #cecece; 63 | --vscode-button-foreground: #ffffff; 64 | --vscode-button-background: #007acc; 65 | --vscode-button-hoverBackground: #0062a3; 66 | --vscode-button-secondaryForeground: #ffffff; 67 | --vscode-button-secondaryBackground: #5f6a79; 68 | --vscode-button-secondaryHoverBackground: #4c5561; 69 | --vscode-badge-background: #c4c4c4; 70 | --vscode-badge-foreground: #333333; 71 | --vscode-scrollbar-shadow: #dddddd; 72 | --vscode-scrollbarSlider-background: rgba(100, 100, 100, 0.4); 73 | --vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7); 74 | --vscode-scrollbarSlider-activeBackground: rgba(0, 0, 0, 0.6); 75 | --vscode-progressBar-background: #0e70c0; 76 | --vscode-editorError-foreground: #e51400; 77 | --vscode-editorWarning-foreground: #bf8803; 78 | --vscode-editorInfo-foreground: #1a85ff; 79 | --vscode-editorHint-foreground: #6c6c6c; 80 | --vscode-sash-hoverBorder: #0090f1; 81 | --vscode-editor-background: #ffffff; 82 | --vscode-editor-foreground: #000000; 83 | --vscode-editorWidget-background: #f3f3f3; 84 | --vscode-editorWidget-foreground: #616161; 85 | --vscode-editorWidget-border: #c8c8c8; 86 | --vscode-quickInput-background: #f3f3f3; 87 | --vscode-quickInput-foreground: #616161; 88 | --vscode-quickInputTitle-background: rgba(0, 0, 0, 0.06); 89 | --vscode-pickerGroup-foreground: #0066bf; 90 | --vscode-pickerGroup-border: #cccedb; 91 | --vscode-keybindingLabel-background: rgba(221, 221, 221, 0.4); 92 | --vscode-keybindingLabel-foreground: #555555; 93 | --vscode-keybindingLabel-border: rgba(204, 204, 204, 0.4); 94 | --vscode-keybindingLabel-bottomBorder: rgba(187, 187, 187, 0.4); 95 | --vscode-editor-selectionBackground: #add6ff; 96 | --vscode-editor-inactiveSelectionBackground: #e5ebf1; 97 | --vscode-editor-selectionHighlightBackground: rgba(173, 214, 255, 0.5); 98 | --vscode-editor-findMatchBackground: #a8ac94; 99 | --vscode-editor-findMatchHighlightBackground: rgba(234, 92, 0, 0.33); 100 | --vscode-editor-findRangeHighlightBackground: rgba(180, 180, 180, 0.3); 101 | --vscode-searchEditor-findMatchBackground: rgba(234, 92, 0, 0.22); 102 | --vscode-editor-hoverHighlightBackground: rgba(173, 214, 255, 0.15); 103 | --vscode-editorHoverWidget-background: #f3f3f3; 104 | --vscode-editorHoverWidget-foreground: #616161; 105 | --vscode-editorHoverWidget-border: #c8c8c8; 106 | --vscode-editorHoverWidget-statusBarBackground: #e7e7e7; 107 | --vscode-editorLink-activeForeground: #0000ff; 108 | --vscode-editorInlayHint-foreground: rgba(51, 51, 51, 0.8); 109 | --vscode-editorInlayHint-background: rgba(196, 196, 196, 0.3); 110 | --vscode-editorInlayHint-typeForeground: rgba(51, 51, 51, 0.8); 111 | --vscode-editorInlayHint-typeBackground: rgba(196, 196, 196, 0.3); 112 | --vscode-editorInlayHint-parameterForeground: rgba(51, 51, 51, 0.8); 113 | --vscode-editorInlayHint-parameterBackground: rgba(196, 196, 196, 0.3); 114 | --vscode-editorLightBulb-foreground: #ddb100; 115 | --vscode-editorLightBulbAutoFix-foreground: #007acc; 116 | --vscode-diffEditor-insertedTextBackground: rgba(155, 185, 85, 0.2); 117 | --vscode-diffEditor-removedTextBackground: rgba(255, 0, 0, 0.2); 118 | --vscode-diffEditor-diagonalFill: rgba(34, 34, 34, 0.2); 119 | --vscode-list-focusOutline: #0090f1; 120 | --vscode-list-activeSelectionBackground: #0060c0; 121 | --vscode-list-activeSelectionForeground: #ffffff; 122 | --vscode-list-activeSelectionIconForeground: #ffffff; 123 | --vscode-list-inactiveSelectionBackground: #e4e6f1; 124 | --vscode-list-hoverBackground: #e8e8e8; 125 | --vscode-list-dropBackground: #d6ebff; 126 | --vscode-list-highlightForeground: #0066bf; 127 | --vscode-list-focusHighlightForeground: #9dddff; 128 | --vscode-list-invalidItemForeground: #b89500; 129 | --vscode-list-errorForeground: #b01011; 130 | --vscode-list-warningForeground: #855f00; 131 | --vscode-listFilterWidget-background: #efc1ad; 132 | --vscode-listFilterWidget-outline: rgba(0, 0, 0, 0); 133 | --vscode-listFilterWidget-noMatchesOutline: #be1100; 134 | --vscode-list-filterMatchBackground: rgba(234, 92, 0, 0.33); 135 | --vscode-tree-indentGuidesStroke: #a9a9a9; 136 | --vscode-tree-tableColumnsBorder: rgba(97, 97, 97, 0.13); 137 | --vscode-tree-tableOddRowsBackground: rgba(97, 97, 97, 0.04); 138 | --vscode-list-deemphasizedForeground: #8e8e90; 139 | --vscode-quickInputList-focusForeground: #ffffff; 140 | --vscode-quickInputList-focusIconForeground: #ffffff; 141 | --vscode-quickInputList-focusBackground: #0060c0; 142 | --vscode-menu-foreground: #616161; 143 | --vscode-menu-background: #ffffff; 144 | --vscode-menu-selectionForeground: #ffffff; 145 | --vscode-menu-selectionBackground: #0060c0; 146 | --vscode-menu-separatorBackground: #d4d4d4; 147 | --vscode-toolbar-hoverBackground: rgba(184, 184, 184, 0.31); 148 | --vscode-toolbar-activeBackground: rgba(166, 166, 166, 0.31); 149 | --vscode-editor-snippetTabstopHighlightBackground: rgba(10, 50, 100, 0.2); 150 | --vscode-editor-snippetFinalTabstopHighlightBorder: rgba(10, 50, 100, 0.5); 151 | --vscode-breadcrumb-foreground: rgba(97, 97, 97, 0.8); 152 | --vscode-breadcrumb-background: #ffffff; 153 | --vscode-breadcrumb-focusForeground: #4e4e4e; 154 | --vscode-breadcrumb-activeSelectionForeground: #4e4e4e; 155 | --vscode-breadcrumbPicker-background: #f3f3f3; 156 | --vscode-merge-currentHeaderBackground: rgba(64, 200, 174, 0.5); 157 | --vscode-merge-currentContentBackground: rgba(64, 200, 174, 0.2); 158 | --vscode-merge-incomingHeaderBackground: rgba(64, 166, 255, 0.5); 159 | --vscode-merge-incomingContentBackground: rgba(64, 166, 255, 0.2); 160 | --vscode-merge-commonHeaderBackground: rgba(96, 96, 96, 0.4); 161 | --vscode-merge-commonContentBackground: rgba(96, 96, 96, 0.16); 162 | --vscode-editorOverviewRuler-currentContentForeground: rgba(64, 200, 174, 0.5); 163 | --vscode-editorOverviewRuler-incomingContentForeground: rgba(64, 166, 255, 0.5); 164 | --vscode-editorOverviewRuler-commonContentForeground: rgba(96, 96, 96, 0.4); 165 | --vscode-editorOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49); 166 | --vscode-editorOverviewRuler-selectionHighlightForeground: rgba(160, 160, 160, 0.8); 167 | --vscode-minimap-findMatchHighlight: #d18616; 168 | --vscode-minimap-selectionOccurrenceHighlight: #c9c9c9; 169 | --vscode-minimap-selectionHighlight: #add6ff; 170 | --vscode-minimap-errorHighlight: rgba(255, 18, 18, 0.7); 171 | --vscode-minimap-warningHighlight: #bf8803; 172 | --vscode-minimap-foregroundOpacity: #000000; 173 | --vscode-minimapSlider-background: rgba(100, 100, 100, 0.2); 174 | --vscode-minimapSlider-hoverBackground: rgba(100, 100, 100, 0.35); 175 | --vscode-minimapSlider-activeBackground: rgba(0, 0, 0, 0.3); 176 | --vscode-problemsErrorIcon-foreground: #e51400; 177 | --vscode-problemsWarningIcon-foreground: #bf8803; 178 | --vscode-problemsInfoIcon-foreground: #1a85ff; 179 | --vscode-charts-foreground: #616161; 180 | --vscode-charts-lines: rgba(97, 97, 97, 0.5); 181 | --vscode-charts-red: #e51400; 182 | --vscode-charts-blue: #1a85ff; 183 | --vscode-charts-yellow: #bf8803; 184 | --vscode-charts-orange: #d18616; 185 | --vscode-charts-green: #388a34; 186 | --vscode-charts-purple: #652d90; 187 | --vscode-editor-lineHighlightBorder: #eeeeee; 188 | --vscode-editor-rangeHighlightBackground: rgba(253, 255, 0, 0.2); 189 | --vscode-editor-symbolHighlightBackground: rgba(234, 92, 0, 0.33); 190 | --vscode-editorCursor-foreground: #000000; 191 | --vscode-editorWhitespace-foreground: rgba(51, 51, 51, 0.2); 192 | --vscode-editorIndentGuide-background: #d3d3d3; 193 | --vscode-editorIndentGuide-activeBackground: #939393; 194 | --vscode-editorLineNumber-foreground: #237893; 195 | --vscode-editorActiveLineNumber-foreground: #0b216f; 196 | --vscode-editorLineNumber-activeForeground: #0b216f; 197 | --vscode-editorRuler-foreground: #d3d3d3; 198 | --vscode-editorCodeLens-foreground: #919191; 199 | --vscode-editorBracketMatch-background: rgba(0, 100, 0, 0.1); 200 | --vscode-editorBracketMatch-border: #b9b9b9; 201 | --vscode-editorOverviewRuler-border: rgba(127, 127, 127, 0.3); 202 | --vscode-editorGutter-background: #ffffff; 203 | --vscode-editorUnnecessaryCode-opacity: rgba(0, 0, 0, 0.47); 204 | --vscode-editorGhostText-foreground: rgba(0, 0, 0, 0.47); 205 | --vscode-editorOverviewRuler-rangeHighlightForeground: rgba(0, 122, 204, 0.6); 206 | --vscode-editorOverviewRuler-errorForeground: rgba(255, 18, 18, 0.7); 207 | --vscode-editorOverviewRuler-warningForeground: #bf8803; 208 | --vscode-editorOverviewRuler-infoForeground: #1a85ff; 209 | --vscode-editorBracketHighlight-foreground1: #0431fa; 210 | --vscode-editorBracketHighlight-foreground2: #319331; 211 | --vscode-editorBracketHighlight-foreground3: #7b3814; 212 | --vscode-editorBracketHighlight-foreground4: rgba(0, 0, 0, 0); 213 | --vscode-editorBracketHighlight-foreground5: rgba(0, 0, 0, 0); 214 | --vscode-editorBracketHighlight-foreground6: rgba(0, 0, 0, 0); 215 | --vscode-editorBracketHighlight-unexpectedBracket\.foreground: rgba(255, 18, 18, 0.8); 216 | --vscode-editorBracketPairGuide-background1: rgba(0, 0, 0, 0); 217 | --vscode-editorBracketPairGuide-background2: rgba(0, 0, 0, 0); 218 | --vscode-editorBracketPairGuide-background3: rgba(0, 0, 0, 0); 219 | --vscode-editorBracketPairGuide-background4: rgba(0, 0, 0, 0); 220 | --vscode-editorBracketPairGuide-background5: rgba(0, 0, 0, 0); 221 | --vscode-editorBracketPairGuide-background6: rgba(0, 0, 0, 0); 222 | --vscode-editorBracketPairGuide-activeBackground1: rgba(0, 0, 0, 0); 223 | --vscode-editorBracketPairGuide-activeBackground2: rgba(0, 0, 0, 0); 224 | --vscode-editorBracketPairGuide-activeBackground3: rgba(0, 0, 0, 0); 225 | --vscode-editorBracketPairGuide-activeBackground4: rgba(0, 0, 0, 0); 226 | --vscode-editorBracketPairGuide-activeBackground5: rgba(0, 0, 0, 0); 227 | --vscode-editorBracketPairGuide-activeBackground6: rgba(0, 0, 0, 0); 228 | --vscode-editorUnicodeHighlight-border: #cea33d; 229 | --vscode-editorUnicodeHighlight-background: rgba(206, 163, 61, 0.08); 230 | --vscode-symbolIcon-arrayForeground: #616161; 231 | --vscode-symbolIcon-booleanForeground: #616161; 232 | --vscode-symbolIcon-classForeground: #d67e00; 233 | --vscode-symbolIcon-colorForeground: #616161; 234 | --vscode-symbolIcon-constantForeground: #616161; 235 | --vscode-symbolIcon-constructorForeground: #652d90; 236 | --vscode-symbolIcon-enumeratorForeground: #d67e00; 237 | --vscode-symbolIcon-enumeratorMemberForeground: #007acc; 238 | --vscode-symbolIcon-eventForeground: #d67e00; 239 | --vscode-symbolIcon-fieldForeground: #007acc; 240 | --vscode-symbolIcon-fileForeground: #616161; 241 | --vscode-symbolIcon-folderForeground: #616161; 242 | --vscode-symbolIcon-functionForeground: #652d90; 243 | --vscode-symbolIcon-interfaceForeground: #007acc; 244 | --vscode-symbolIcon-keyForeground: #616161; 245 | --vscode-symbolIcon-keywordForeground: #616161; 246 | --vscode-symbolIcon-methodForeground: #652d90; 247 | --vscode-symbolIcon-moduleForeground: #616161; 248 | --vscode-symbolIcon-namespaceForeground: #616161; 249 | --vscode-symbolIcon-nullForeground: #616161; 250 | --vscode-symbolIcon-numberForeground: #616161; 251 | --vscode-symbolIcon-objectForeground: #616161; 252 | --vscode-symbolIcon-operatorForeground: #616161; 253 | --vscode-symbolIcon-packageForeground: #616161; 254 | --vscode-symbolIcon-propertyForeground: #616161; 255 | --vscode-symbolIcon-referenceForeground: #616161; 256 | --vscode-symbolIcon-snippetForeground: #616161; 257 | --vscode-symbolIcon-stringForeground: #616161; 258 | --vscode-symbolIcon-structForeground: #616161; 259 | --vscode-symbolIcon-textForeground: #616161; 260 | --vscode-symbolIcon-typeParameterForeground: #616161; 261 | --vscode-symbolIcon-unitForeground: #616161; 262 | --vscode-symbolIcon-variableForeground: #007acc; 263 | --vscode-editorHoverWidget-highlightForeground: #0066bf; 264 | --vscode-editorOverviewRuler-bracketMatchForeground: #a0a0a0; 265 | --vscode-editor-foldBackground: rgba(173, 214, 255, 0.3); 266 | --vscode-editorGutter-foldingControlForeground: #424242; 267 | --vscode-editor-linkedEditingBackground: rgba(255, 0, 0, 0.3); 268 | --vscode-editorSuggestWidget-background: #f3f3f3; 269 | --vscode-editorSuggestWidget-border: #c8c8c8; 270 | --vscode-editorSuggestWidget-foreground: #000000; 271 | --vscode-editorSuggestWidget-selectedForeground: #ffffff; 272 | --vscode-editorSuggestWidget-selectedIconForeground: #ffffff; 273 | --vscode-editorSuggestWidget-selectedBackground: #0060c0; 274 | --vscode-editorSuggestWidget-highlightForeground: #0066bf; 275 | --vscode-editorSuggestWidget-focusHighlightForeground: #9dddff; 276 | --vscode-editorSuggestWidgetStatus-foreground: rgba(0, 0, 0, 0.5); 277 | --vscode-editor-wordHighlightBackground: rgba(87, 87, 87, 0.25); 278 | --vscode-editor-wordHighlightStrongBackground: rgba(14, 99, 156, 0.25); 279 | --vscode-editorOverviewRuler-wordHighlightForeground: rgba(160, 160, 160, 0.8); 280 | --vscode-editorOverviewRuler-wordHighlightStrongForeground: rgba(192, 160, 192, 0.8); 281 | --vscode-peekViewTitle-background: rgba(26, 133, 255, 0.1); 282 | --vscode-peekViewTitleLabel-foreground: #000000; 283 | --vscode-peekViewTitleDescription-foreground: #616161; 284 | --vscode-peekView-border: #1a85ff; 285 | --vscode-peekViewResult-background: #f3f3f3; 286 | --vscode-peekViewResult-lineForeground: #646465; 287 | --vscode-peekViewResult-fileForeground: #1e1e1e; 288 | --vscode-peekViewResult-selectionBackground: rgba(51, 153, 255, 0.2); 289 | --vscode-peekViewResult-selectionForeground: #6c6c6c; 290 | --vscode-peekViewEditor-background: #f2f8fc; 291 | --vscode-peekViewEditorGutter-background: #f2f8fc; 292 | --vscode-peekViewResult-matchHighlightBackground: rgba(234, 92, 0, 0.3); 293 | --vscode-peekViewEditor-matchHighlightBackground: rgba(245, 216, 2, 0.87); 294 | --vscode-editorMarkerNavigationError-background: #e51400; 295 | --vscode-editorMarkerNavigationError-headerBackground: rgba(229, 20, 0, 0.1); 296 | --vscode-editorMarkerNavigationWarning-background: #bf8803; 297 | --vscode-editorMarkerNavigationWarning-headerBackground: rgba(191, 136, 3, 0.1); 298 | --vscode-editorMarkerNavigationInfo-background: #1a85ff; 299 | --vscode-editorMarkerNavigationInfo-headerBackground: rgba(26, 133, 255, 0.1); 300 | --vscode-editorMarkerNavigation-background: #ffffff; 301 | --vscode-tab-activeBackground: #ffffff; 302 | --vscode-tab-unfocusedActiveBackground: #ffffff; 303 | --vscode-tab-inactiveBackground: #ececec; 304 | --vscode-tab-unfocusedInactiveBackground: #ececec; 305 | --vscode-tab-activeForeground: #333333; 306 | --vscode-tab-inactiveForeground: rgba(51, 51, 51, 0.7); 307 | --vscode-tab-unfocusedActiveForeground: rgba(51, 51, 51, 0.7); 308 | --vscode-tab-unfocusedInactiveForeground: rgba(51, 51, 51, 0.35); 309 | --vscode-tab-border: #f3f3f3; 310 | --vscode-tab-lastPinnedBorder: rgba(97, 97, 97, 0.19); 311 | --vscode-tab-activeModifiedBorder: #33aaee; 312 | --vscode-tab-inactiveModifiedBorder: rgba(51, 170, 238, 0.5); 313 | --vscode-tab-unfocusedActiveModifiedBorder: rgba(51, 170, 238, 0.7); 314 | --vscode-tab-unfocusedInactiveModifiedBorder: rgba(51, 170, 238, 0.25); 315 | --vscode-editorPane-background: #ffffff; 316 | --vscode-editorGroupHeader-tabsBackground: #f3f3f3; 317 | --vscode-editorGroupHeader-noTabsBackground: #ffffff; 318 | --vscode-editorGroup-border: #e7e7e7; 319 | --vscode-editorGroup-dropBackground: rgba(38, 119, 203, 0.18); 320 | --vscode-editorGroup-dropIntoPromptForeground: #616161; 321 | --vscode-editorGroup-dropIntoPromptBackground: #f3f3f3; 322 | --vscode-sideBySideEditor-horizontalBorder: #e7e7e7; 323 | --vscode-sideBySideEditor-verticalBorder: #e7e7e7; 324 | --vscode-panel-background: #ffffff; 325 | --vscode-panel-border: rgba(128, 128, 128, 0.35); 326 | --vscode-panelTitle-activeForeground: #424242; 327 | --vscode-panelTitle-inactiveForeground: rgba(66, 66, 66, 0.75); 328 | --vscode-panelTitle-activeBorder: #424242; 329 | --vscode-panelInput-border: #dddddd; 330 | --vscode-panel-dropBorder: #424242; 331 | --vscode-panelSection-dropBackground: rgba(38, 119, 203, 0.18); 332 | --vscode-panelSectionHeader-background: rgba(128, 128, 128, 0.2); 333 | --vscode-panelSection-border: rgba(128, 128, 128, 0.35); 334 | --vscode-banner-background: #004386; 335 | --vscode-banner-foreground: #ffffff; 336 | --vscode-banner-iconForeground: #1a85ff; 337 | --vscode-statusBar-foreground: #ffffff; 338 | --vscode-statusBar-noFolderForeground: #ffffff; 339 | --vscode-statusBar-background: #007acc; 340 | --vscode-statusBar-noFolderBackground: #68217a; 341 | --vscode-statusBar-focusBorder: #ffffff; 342 | --vscode-statusBarItem-activeBackground: rgba(255, 255, 255, 0.18); 343 | --vscode-statusBarItem-focusBorder: #ffffff; 344 | --vscode-statusBarItem-hoverBackground: rgba(255, 255, 255, 0.12); 345 | --vscode-statusBarItem-compactHoverBackground: rgba(255, 255, 255, 0.2); 346 | --vscode-statusBarItem-prominentForeground: #ffffff; 347 | --vscode-statusBarItem-prominentBackground: rgba(0, 0, 0, 0.5); 348 | --vscode-statusBarItem-prominentHoverBackground: rgba(0, 0, 0, 0.3); 349 | --vscode-statusBarItem-errorBackground: #c72e0f; 350 | --vscode-statusBarItem-errorForeground: #ffffff; 351 | --vscode-statusBarItem-warningBackground: #725102; 352 | --vscode-statusBarItem-warningForeground: #ffffff; 353 | --vscode-activityBar-background: #2c2c2c; 354 | --vscode-activityBar-foreground: #ffffff; 355 | --vscode-activityBar-inactiveForeground: rgba(255, 255, 255, 0.4); 356 | --vscode-activityBar-activeBorder: #ffffff; 357 | --vscode-activityBar-dropBorder: #ffffff; 358 | --vscode-activityBarBadge-background: #007acc; 359 | --vscode-activityBarBadge-foreground: #ffffff; 360 | --vscode-statusBarItem-remoteBackground: #16825d; 361 | --vscode-statusBarItem-remoteForeground: #ffffff; 362 | --vscode-extensionBadge-remoteBackground: #007acc; 363 | --vscode-extensionBadge-remoteForeground: #ffffff; 364 | --vscode-sideBar-background: #f3f3f3; 365 | --vscode-sideBarTitle-foreground: #6f6f6f; 366 | --vscode-sideBar-dropBackground: rgba(38, 119, 203, 0.18); 367 | --vscode-sideBarSectionHeader-background: rgba(0, 0, 0, 0); 368 | --vscode-sideBarSectionHeader-border: rgba(97, 97, 97, 0.19); 369 | --vscode-titleBar-activeForeground: #333333; 370 | --vscode-titleBar-inactiveForeground: rgba(51, 51, 51, 0.6); 371 | --vscode-titleBar-activeBackground: #dddddd; 372 | --vscode-titleBar-inactiveBackground: rgba(221, 221, 221, 0.6); 373 | --vscode-menubar-selectionForeground: #333333; 374 | --vscode-menubar-selectionBackground: rgba(184, 184, 184, 0.31); 375 | --vscode-notifications-foreground: #616161; 376 | --vscode-notifications-background: #f3f3f3; 377 | --vscode-notificationLink-foreground: #006ab1; 378 | --vscode-notificationCenterHeader-background: #e7e7e7; 379 | --vscode-notifications-border: #e7e7e7; 380 | --vscode-notificationsErrorIcon-foreground: #e51400; 381 | --vscode-notificationsWarningIcon-foreground: #bf8803; 382 | --vscode-notificationsInfoIcon-foreground: #1a85ff; 383 | --vscode-editorCommentsWidget-resolvedBorder: rgba(97, 97, 97, 0.5); 384 | --vscode-editorCommentsWidget-unresolvedBorder: #1a85ff; 385 | --vscode-editorCommentsWidget-rangeBackground: rgba(26, 133, 255, 0.1); 386 | --vscode-editorCommentsWidget-rangeBorder: rgba(26, 133, 255, 0.4); 387 | --vscode-editorCommentsWidget-rangeActiveBackground: rgba(26, 133, 255, 0.1); 388 | --vscode-editorCommentsWidget-rangeActiveBorder: rgba(26, 133, 255, 0.4); 389 | --vscode-editorGutter-commentRangeForeground: #c5c5c5; 390 | --vscode-debugToolBar-background: #f3f3f3; 391 | --vscode-debugIcon-startForeground: #388a34; 392 | --vscode-editor-stackFrameHighlightBackground: rgba(255, 255, 102, 0.45); 393 | --vscode-editor-focusedStackFrameHighlightBackground: rgba(206, 231, 206, 0.45); 394 | --vscode-settings-headerForeground: #444444; 395 | --vscode-settings-modifiedItemIndicator: #66afe0; 396 | --vscode-settings-headerBorder: rgba(128, 128, 128, 0.35); 397 | --vscode-settings-sashBorder: rgba(128, 128, 128, 0.35); 398 | --vscode-settings-dropdownBackground: #ffffff; 399 | --vscode-settings-dropdownBorder: #cecece; 400 | --vscode-settings-dropdownListBorder: #c8c8c8; 401 | --vscode-settings-checkboxBackground: #ffffff; 402 | --vscode-settings-checkboxBorder: #cecece; 403 | --vscode-settings-textInputBackground: #ffffff; 404 | --vscode-settings-textInputForeground: #616161; 405 | --vscode-settings-textInputBorder: #cecece; 406 | --vscode-settings-numberInputBackground: #ffffff; 407 | --vscode-settings-numberInputForeground: #616161; 408 | --vscode-settings-numberInputBorder: #cecece; 409 | --vscode-settings-focusedRowBackground: rgba(232, 232, 232, 0.6); 410 | --vscode-settings-rowHoverBackground: rgba(232, 232, 232, 0.3); 411 | --vscode-settings-focusedRowBorder: rgba(0, 0, 0, 0.12); 412 | --vscode-terminal-foreground: #333333; 413 | --vscode-terminal-selectionBackground: #add6ff; 414 | --vscode-terminalCommandDecoration-defaultBackground: rgba(0, 0, 0, 0.25); 415 | --vscode-terminalCommandDecoration-successBackground: #2090d3; 416 | --vscode-terminalCommandDecoration-errorBackground: #e51400; 417 | --vscode-terminalOverviewRuler-cursorForeground: rgba(160, 160, 160, 0.8); 418 | --vscode-terminal-border: rgba(128, 128, 128, 0.35); 419 | --vscode-terminal-findMatchBackground: #a8ac94; 420 | --vscode-terminal-findMatchHighlightBackground: rgba(234, 92, 0, 0.33); 421 | --vscode-terminalOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49); 422 | --vscode-terminal-dropBackground: rgba(38, 119, 203, 0.18); 423 | --vscode-testing-iconFailed: #f14c4c; 424 | --vscode-testing-iconErrored: #f14c4c; 425 | --vscode-testing-iconPassed: #73c991; 426 | --vscode-testing-runAction: #73c991; 427 | --vscode-testing-iconQueued: #cca700; 428 | --vscode-testing-iconUnset: #848484; 429 | --vscode-testing-iconSkipped: #848484; 430 | --vscode-testing-peekBorder: #e51400; 431 | --vscode-testing-peekHeaderBackground: rgba(229, 20, 0, 0.1); 432 | --vscode-testing-message\.error\.decorationForeground: #e51400; 433 | --vscode-testing-message\.error\.lineBackground: rgba(255, 0, 0, 0.2); 434 | --vscode-testing-message\.info\.decorationForeground: rgba(0, 0, 0, 0.5); 435 | --vscode-welcomePage-tileBackground: #f3f3f3; 436 | --vscode-welcomePage-tileHoverBackground: #dbdbdb; 437 | --vscode-welcomePage-tileShadow: rgba(0, 0, 0, 0.16); 438 | --vscode-welcomePage-progress\.background: #ffffff; 439 | --vscode-welcomePage-progress\.foreground: #006ab1; 440 | --vscode-commandCenter-foreground: #333333; 441 | --vscode-commandCenter-activeForeground: #333333; 442 | --vscode-commandCenter-activeBackground: rgba(184, 184, 184, 0.31); 443 | --vscode-commandCenter-border: rgba(184, 184, 184, 0.31); 444 | --vscode-debugExceptionWidget-border: #a31515; 445 | --vscode-debugExceptionWidget-background: #f1dfde; 446 | --vscode-ports-iconRunningProcessForeground: #369432; 447 | --vscode-statusBar-debuggingBackground: #cc6633; 448 | --vscode-statusBar-debuggingForeground: #ffffff; 449 | --vscode-editor-inlineValuesForeground: rgba(0, 0, 0, 0.5); 450 | --vscode-editor-inlineValuesBackground: rgba(255, 200, 0, 0.2); 451 | --vscode-editorGutter-modifiedBackground: #2090d3; 452 | --vscode-editorGutter-addedBackground: #48985d; 453 | --vscode-editorGutter-deletedBackground: #e51400; 454 | --vscode-minimapGutter-modifiedBackground: #2090d3; 455 | --vscode-minimapGutter-addedBackground: #48985d; 456 | --vscode-minimapGutter-deletedBackground: #e51400; 457 | --vscode-editorOverviewRuler-modifiedForeground: rgba(32, 144, 211, 0.6); 458 | --vscode-editorOverviewRuler-addedForeground: rgba(72, 152, 93, 0.6); 459 | --vscode-editorOverviewRuler-deletedForeground: rgba(229, 20, 0, 0.6); 460 | --vscode-debugIcon-breakpointForeground: #e51400; 461 | --vscode-debugIcon-breakpointDisabledForeground: #848484; 462 | --vscode-debugIcon-breakpointUnverifiedForeground: #848484; 463 | --vscode-debugIcon-breakpointCurrentStackframeForeground: #be8700; 464 | --vscode-debugIcon-breakpointStackframeForeground: #89d185; 465 | --vscode-notebook-cellBorderColor: #e8e8e8; 466 | --vscode-notebook-focusedEditorBorder: #0090f1; 467 | --vscode-notebookStatusSuccessIcon-foreground: #388a34; 468 | --vscode-notebookStatusErrorIcon-foreground: #a1260d; 469 | --vscode-notebookStatusRunningIcon-foreground: #616161; 470 | --vscode-notebook-cellToolbarSeparator: rgba(128, 128, 128, 0.35); 471 | --vscode-notebook-selectedCellBackground: rgba(200, 221, 241, 0.31); 472 | --vscode-notebook-selectedCellBorder: #e8e8e8; 473 | --vscode-notebook-focusedCellBorder: #0090f1; 474 | --vscode-notebook-inactiveFocusedCellBorder: #e8e8e8; 475 | --vscode-notebook-cellStatusBarItemHoverBackground: rgba(0, 0, 0, 0.08); 476 | --vscode-notebook-cellInsertionIndicator: #0090f1; 477 | --vscode-notebookScrollbarSlider-background: rgba(100, 100, 100, 0.4); 478 | --vscode-notebookScrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7); 479 | --vscode-notebookScrollbarSlider-activeBackground: rgba(0, 0, 0, 0.6); 480 | --vscode-notebook-symbolHighlightBackground: rgba(253, 255, 0, 0.2); 481 | --vscode-notebook-cellEditorBackground: #f3f3f3; 482 | --vscode-keybindingTable-headerBackground: rgba(97, 97, 97, 0.04); 483 | --vscode-keybindingTable-rowsBackground: rgba(97, 97, 97, 0.04); 484 | --vscode-scm-providerBorder: #c8c8c8; 485 | --vscode-searchEditor-textInputBorder: #cecece; 486 | --vscode-debugTokenExpression-name: #9b46b0; 487 | --vscode-debugTokenExpression-value: rgba(108, 108, 108, 0.8); 488 | --vscode-debugTokenExpression-string: #a31515; 489 | --vscode-debugTokenExpression-boolean: #0000ff; 490 | --vscode-debugTokenExpression-number: #098658; 491 | --vscode-debugTokenExpression-error: #e51400; 492 | --vscode-debugView-exceptionLabelForeground: #ffffff; 493 | --vscode-debugView-exceptionLabelBackground: #a31515; 494 | --vscode-debugView-stateLabelForeground: #616161; 495 | --vscode-debugView-stateLabelBackground: rgba(136, 136, 136, 0.27); 496 | --vscode-debugView-valueChangedHighlight: #569cd6; 497 | --vscode-debugConsole-infoForeground: #1a85ff; 498 | --vscode-debugConsole-warningForeground: #bf8803; 499 | --vscode-debugConsole-errorForeground: #a1260d; 500 | --vscode-debugConsole-sourceForeground: #616161; 501 | --vscode-debugConsoleInputIcon-foreground: #616161; 502 | --vscode-debugIcon-pauseForeground: #007acc; 503 | --vscode-debugIcon-stopForeground: #a1260d; 504 | --vscode-debugIcon-disconnectForeground: #a1260d; 505 | --vscode-debugIcon-restartForeground: #388a34; 506 | --vscode-debugIcon-stepOverForeground: #007acc; 507 | --vscode-debugIcon-stepIntoForeground: #007acc; 508 | --vscode-debugIcon-stepOutForeground: #007acc; 509 | --vscode-debugIcon-continueForeground: #007acc; 510 | --vscode-debugIcon-stepBackForeground: #007acc; 511 | --vscode-extensionButton-prominentBackground: #007acc; 512 | --vscode-extensionButton-prominentForeground: #ffffff; 513 | --vscode-extensionButton-prominentHoverBackground: #0062a3; 514 | --vscode-extensionSponsorButton-background: #b51e78; 515 | --vscode-extensionSponsorButton-hoverBackground: #d61b8c; 516 | --vscode-extensionIcon-starForeground: #df6100; 517 | --vscode-extensionIcon-verifiedForeground: #006ab1; 518 | --vscode-extensionIcon-preReleaseForeground: #1d9271; 519 | --vscode-terminal-ansiBlack: #000000; 520 | --vscode-terminal-ansiRed: #cd3131; 521 | --vscode-terminal-ansiGreen: #00bc00; 522 | --vscode-terminal-ansiYellow: #949800; 523 | --vscode-terminal-ansiBlue: #0451a5; 524 | --vscode-terminal-ansiMagenta: #bc05bc; 525 | --vscode-terminal-ansiCyan: #0598bc; 526 | --vscode-terminal-ansiWhite: #555555; 527 | --vscode-terminal-ansiBrightBlack: #666666; 528 | --vscode-terminal-ansiBrightRed: #cd3131; 529 | --vscode-terminal-ansiBrightGreen: #14ce14; 530 | --vscode-terminal-ansiBrightYellow: #b5ba00; 531 | --vscode-terminal-ansiBrightBlue: #0451a5; 532 | --vscode-terminal-ansiBrightMagenta: #bc05bc; 533 | --vscode-terminal-ansiBrightCyan: #0598bc; 534 | --vscode-terminal-ansiBrightWhite: #a5a5a5; 535 | --vscode-interactive-activeCodeBorder: #1a85ff; 536 | --vscode-interactive-inactiveCodeBorder: #e4e6f1; 537 | --vscode-gitDecoration-addedResourceForeground: #587c0c; 538 | --vscode-gitDecoration-modifiedResourceForeground: #895503; 539 | --vscode-gitDecoration-deletedResourceForeground: #ad0707; 540 | --vscode-gitDecoration-renamedResourceForeground: #007100; 541 | --vscode-gitDecoration-untrackedResourceForeground: #007100; 542 | --vscode-gitDecoration-ignoredResourceForeground: #8e8e90; 543 | --vscode-gitDecoration-stageModifiedResourceForeground: #895503; 544 | --vscode-gitDecoration-stageDeletedResourceForeground: #ad0707; 545 | --vscode-gitDecoration-conflictingResourceForeground: #ad0707; 546 | --vscode-gitDecoration-submoduleResourceForeground: #1258a7; 547 | } -------------------------------------------------------------------------------- /ckeditor5-build-markdown/sample/sample-markdown-data.js: -------------------------------------------------------------------------------- 1 | const data = ` 2 | ## Headings 3 | 4 | # h1 Heading 5 | 6 | ## h2 Heading 7 | 8 | ### h3 Heading 9 | 10 | #### h4 Heading 11 | 12 | ##### h5 Heading 13 | 14 | ###### h6 Heading 15 | 16 | ## Horizontal Rule 17 | 18 | --- 19 | 20 | ## Emphasis 21 | 22 | **This is bold text** 23 | 24 | **This is bold text** 25 | 26 | _This is italic text_ 27 | 28 | _This is italic text_ 29 | 30 | ~Strikethrough~ 31 | 32 | ## Blockquotes 33 | 34 | > Blockquotes can also be nested... 35 | > 36 | > > ...by using greater-than signs right next to each other... 37 | > > 38 | > > > ...or with spaces between arrows. 39 | 40 | ## Lists 41 | 42 | Unordered 43 | 44 | * Create a list by starting a line with \`+\`, \`-\`, or \`*\` 45 | * Sub-lists are made by indenting 2 spaces: 46 | * Ac tristique libero volutpat at 47 | * Facilisis in pretium nisl aliquet 48 | * Nulla volutpat aliquam velit 49 | * Very easy! 50 | 51 | Ordered 52 | 53 | 1. Lorem ipsum dolor sit amet 54 | 2. Consectetur adipiscing elit 55 | 3. Integer molestie lorem at massa 56 | 57 | ## Code 58 | 59 | Indented code 60 | 61 | \`\`\`plaintext 62 | line 1 of code 63 | line 2 of code 64 | line 3 of code 65 | \`\`\` 66 | 67 | Block code with backticks 68 | 69 | \`\`\`plaintext 70 | line 1 of code 71 | line 2 of code 72 | line 3 of code 73 | \`\`\` 74 | 75 | ## Tables 76 | 77 | | Option | Description | 78 | | --- | --- | 79 | | foo | Lorem ipsum dolor sit amet, | 80 | | bar | Ut enim ad minim veniam, quis nostrud exercitation ullamco. | 81 | | baz | Excepteur sint occaecat cupidatat non proident. | 82 | 83 | ## Links 84 | 85 | [example](https://example.com) 86 | 87 | [example link with hover](https://example.com) 88 | 89 | ## Images 90 | 91 | ![Minion](https://octodex.github.com/images/original.png) 92 | `; 93 | -------------------------------------------------------------------------------- /ckeditor5-build-markdown/src/ckeditor.js: -------------------------------------------------------------------------------- 1 | import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'; 2 | // CKEditor plugins 3 | import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'; 4 | import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat'; 5 | import AutoImage from '@ckeditor/ckeditor5-image/src/autoimage'; 6 | import AutoLink from '@ckeditor/ckeditor5-link/src/autolink'; 7 | import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote'; 8 | import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'; 9 | import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard'; 10 | import Code from '@ckeditor/ckeditor5-basic-styles/src/code'; 11 | import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock'; 12 | // import CodeBlock from '../ckeditor5-codeblock-with-syntax-highlight/src/codeblock'; 13 | import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'; 14 | import Heading from '@ckeditor/ckeditor5-heading/src/heading'; 15 | import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline'; 16 | import Image from '@ckeditor/ckeditor5-image/src/image'; 17 | import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption'; 18 | import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert'; 19 | // import ImageInsert from '../ckeditor5-insert-image-by-url/insertImageByUrl'; 20 | import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize'; 21 | import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle'; 22 | import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar'; 23 | import Indent from '@ckeditor/ckeditor5-indent/src/indent'; 24 | import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic'; 25 | import Link from '@ckeditor/ckeditor5-link/src/link'; 26 | import List from '@ckeditor/ckeditor5-list/src/list'; 27 | import Markdown from '@ckeditor/ckeditor5-markdown-gfm/src/markdown'; 28 | import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'; 29 | import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice'; 30 | import SourceEditing from '@ckeditor/ckeditor5-source-editing/src/sourceediting'; 31 | import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough'; 32 | import Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript'; 33 | import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript'; 34 | import Table from '@ckeditor/ckeditor5-table/src/table'; 35 | import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar'; 36 | import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline'; 37 | 38 | import './styles.css'; 39 | // import './github-markdown.css'; 40 | 41 | export default class MarkdownEditor extends ClassicEditorBase {} 42 | 43 | // Take a list of commands as names or callbacks and execute them in order stopping on the first success. 44 | // The returned function must be of form ( data, cancel ) => { ... } 45 | // See https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editor-Editor.html#member-keystrokes 46 | const attemptCommands = 47 | (commandNames, stopPropagation = true) => 48 | (data, cancel) => { 49 | for (let commandName of commandNames) { 50 | if (typeof commandName === 'string') { 51 | const command = editor.commands.get(commandName); 52 | if (command?.isEnabled) { 53 | console.debug(`Executed command ${commandName}.`); 54 | command.execute(); 55 | } else { 56 | console.debug(`Command ${commandName} is not enabled.`); 57 | } 58 | } else if (typeof commandName === 'function') { 59 | console.debug(`Executed command ${commandName.toString()}.`); 60 | commandName(); 61 | } 62 | break; 63 | } 64 | if (stopPropagation) { 65 | cancel(); 66 | } 67 | }; 68 | 69 | // Plugins to include in the build. 70 | MarkdownEditor.builtinPlugins = [ 71 | Alignment, 72 | Autoformat, 73 | AutoImage, 74 | AutoLink, 75 | BlockQuote, 76 | Bold, 77 | Clipboard, 78 | Code, 79 | CodeBlock, 80 | Essentials, 81 | Heading, 82 | HorizontalLine, 83 | Image, 84 | ImageCaption, 85 | ImageInsert, 86 | ImageResize, 87 | ImageStyle, 88 | ImageToolbar, 89 | Indent, 90 | Italic, 91 | Link, 92 | List, 93 | Markdown, 94 | Paragraph, 95 | PasteFromOffice, 96 | SourceEditing, 97 | Strikethrough, 98 | Subscript, 99 | Superscript, 100 | Table, 101 | TableToolbar, 102 | Underline, 103 | 104 | /////////////////////////////////////////////////////// 105 | // Hotkeys 106 | /////////////////////////////////////////////////////// 107 | 108 | function (editor) { 109 | // Set keyboard shortcuts. 110 | // See https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editingkeystrokehandler-EditingKeystrokeHandler.html#function-set 111 | 112 | editor.keystrokes.set('Tab', attemptCommands(['indent'])); 113 | editor.keystrokes.set('Shift+Tab', attemptCommands(['outdent'])); 114 | 115 | // We need to explicitly set this hotkey for pasting plain text. 116 | // Normally CKEditor relies on the browser to trigger this, but VS Code doesn't have a plain paste hotkey. 117 | // Recieving this in onDidReceiveMessage will run the paste command, and CKE5 detects shift is pressed and pastes as plaintext. 118 | // We can't just programmatically trigger a paste from here, this is impossible in modern browsers due to security considerations. 119 | editor.keystrokes.set( 120 | 'Ctrl+Shift+V', 121 | attemptCommands( 122 | [ 123 | () => { 124 | window.vscode.postMessage({ type: 'plainPaste' }); 125 | }, 126 | ], 127 | true 128 | ) 129 | ); 130 | 131 | // Hotkeys for selecting headers. Ctrl+1 to Ctrl+6 for h1 to h6. 132 | for (const i of [1, 2, 3, 4, 5, 6]) { 133 | editor.keystrokes.set( 134 | `Ctrl+${i}`, 135 | attemptCommands([() => editor.execute('heading', { value: `heading${i}` })]) 136 | ); 137 | } 138 | 139 | editor.keystrokes.set( 140 | 'Ctrl+Shift+1', 141 | attemptCommands([() => editor.execute('heading', { value: 'paragraph' })]) 142 | ); 143 | 144 | // There are already default shortcuts for bold, italic, underlink, hyperlink 145 | editor.keystrokes.set('Ctrl+Shift+C', attemptCommands([() => editor.execute('code')])); 146 | editor.keystrokes.set('Ctrl+Shift+Alt+C', attemptCommands([() => editor.execute('codeBlock')])); 147 | editor.keystrokes.set( 148 | 'Ctrl+Shift+Alt+B', 149 | attemptCommands([() => editor.execute('quoteBlock')]) 150 | ); 151 | editor.keystrokes.set('Ctrl+Shift+B', attemptCommands([() => editor.execute('bulletedList')])); 152 | editor.keystrokes.set('Ctrl+Shift+n', attemptCommands([() => editor.execute('numberedList')])); 153 | editor.keystrokes.set('Ctrl+Shift+n', attemptCommands([() => editor.execute('numberedList')])); 154 | editor.keystrokes.set('Ctrl+Q', attemptCommands([() => editor.execute('bold')])); 155 | }, 156 | ]; 157 | 158 | // Editor configuration. 159 | MarkdownEditor.defaultConfig = { 160 | toolbar: { 161 | items: [ 162 | 'heading', 163 | '|', 164 | 'bold', 165 | 'italic', 166 | 'underline', 167 | 'strikethrough', 168 | 'code', 169 | '|', 170 | 'bulletedList', 171 | 'numberedList', 172 | 'blockQuote', 173 | 'codeBlock', 174 | '|', 175 | 'link', 176 | 'insertImage', 177 | 'insertTable', 178 | 'horizontalLine', 179 | // '|', 180 | // 'sourceEditing', 181 | ], 182 | }, 183 | image: { 184 | toolbar: ['imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative'], 185 | }, 186 | table: { 187 | contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'], 188 | }, 189 | heading: { 190 | options: [ 191 | { model: 'paragraph', title: 'Paragraph' }, 192 | { model: 'heading1', view: 'h1', title: 'Heading 1' }, 193 | { model: 'heading2', view: 'h2', title: 'Heading 2' }, 194 | { model: 'heading3', view: 'h3', title: 'Heading 3' }, 195 | { model: 'heading4', view: 'h4', title: 'Heading 4' }, 196 | { model: 'heading5', view: 'h5', title: 'Heading 5' }, 197 | { model: 'heading6', view: 'h6', title: 'Heading 6' }, 198 | ], 199 | }, 200 | codeBlock: { 201 | languages: [ 202 | { language: '', label: 'Plain text' }, 203 | { language: 'c', label: 'C' }, 204 | { language: 'cs', label: 'C#' }, 205 | { language: 'cpp', label: 'C++' }, 206 | { language: 'css', label: 'CSS' }, 207 | { language: 'diff', label: 'Diff' }, 208 | { language: 'html', label: 'HTML' }, 209 | { language: 'java', label: 'Java' }, 210 | { language: 'javascript', label: 'JavaScript' }, 211 | { language: 'php', label: 'PHP' }, 212 | { language: 'python', label: 'Python' }, 213 | { language: 'ruby', label: 'Ruby' }, 214 | { language: 'typescript', label: 'TypeScript' }, 215 | { language: 'xml', label: 'XML' }, 216 | ], 217 | }, 218 | // This value must be kept in sync with the language defined in webpack.config.js. 219 | language: 'en', 220 | }; 221 | -------------------------------------------------------------------------------- /ckeditor5-build-markdown/src/styles.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans'); 2 | 3 | /* -------------------------- Aesthetics -------------------------- */ 4 | 5 | body, 6 | html { 7 | padding: 0; 8 | margin: 0; 9 | height: 100vh; 10 | width: 100vw; 11 | color: var(--foreground-1); 12 | background-color: var(--background-1); 13 | font-size: var(--vscode-editor-font-size); 14 | 15 | font-family: var(--vscode-editor-font-family); 16 | --ck-inner-shadow: none; 17 | } 18 | 19 | ::selection { 20 | background: var(--vscode-editor-inactiveSelectionBackground); 21 | } 22 | 23 | :focus ::selection { 24 | background: var(--vscode-editor-selectionBackground); 25 | } 26 | :root { 27 | --ck-table-selected-cell-background: rgba(158, 207, 250, 0.3); 28 | } 29 | 30 | h1, 31 | h2, 32 | h3, 33 | h4, 34 | h5, 35 | h6, 36 | ol, 37 | ul, 38 | pre { 39 | font-weight: inherit; 40 | margin: 0.5em 0; 41 | } 42 | h1 { 43 | padding-bottom: 0.3em; 44 | line-height: 1.2; 45 | border-bottom-width: 1px; 46 | border-bottom-style: solid; 47 | border-bottom-color: var(--background-4); 48 | font-weight: normal; 49 | } 50 | 51 | /* Blockquotes */ 52 | .ck-content blockquote { 53 | background: var(--vscode-textBlockQuote-background); 54 | border-color: var(--background-4); 55 | border-left-width: 5px; 56 | border-left-style: solid; 57 | } 58 | 59 | /* Inline code snippets */ 60 | .ck-content code, 61 | .ck-code_selected, 62 | .ck.ck-editor__editable .ck-code_selected { 63 | font-family: var(--vscode-editor-font-family); 64 | color: var(--vscode-textPreformat-foreground); 65 | background-color: var(--background-3); 66 | padding: 0px; 67 | } 68 | 69 | /* Code blocks */ 70 | .ck-content pre { 71 | font-family: var(--vscode-editor-font-family); 72 | background-color: var(--vscode-textCodeBlock-background); 73 | border: none; 74 | padding: 16px; 75 | margin: 8px 0 8px 14px; 76 | } 77 | /* Text inside code blocks */ 78 | .ck-content pre code { 79 | color: var(--foreground-1); 80 | } 81 | 82 | /* The label at top right of code blocks */ 83 | .ck.ck-editor__editable pre[data-language]:after { 84 | color: var(--foreground-1); 85 | background-color: transparent; 86 | right: 1em; 87 | top: 0.5em; 88 | } 89 | 90 | /* Links */ 91 | a { 92 | color: var(--link-color); 93 | text-decoration: none; 94 | } 95 | a:hover { 96 | text-decoration: underline; 97 | cursor: pointer; 98 | } 99 | 100 | /* Horizontal Rule */ 101 | hr { 102 | border: 0; 103 | height: 2px; 104 | border-bottom: 2px solid; 105 | border-color: rgba(255, 255, 255, 0.18); 106 | } 107 | /* Horizontal rules */ 108 | .ck-content hr { 109 | height: 2px; 110 | background: var(--background-4); 111 | margin: 8px 0; 112 | } 113 | 114 | /* Tables */ 115 | .ck-content .table table { 116 | border-collapse: collapse; 117 | border-spacing: 0; 118 | width: 100%; 119 | height: 100%; 120 | border: 1px solid var(--background-4); 121 | } 122 | .ck-content .table { 123 | margin: 10px 0px; 124 | display: table; 125 | } 126 | .ck-content .table table td { 127 | min-width: 2em; 128 | padding: 5px 10px; 129 | border: 1px solid var(--background-4); 130 | } 131 | .ck-content .table table th { 132 | min-width: 2em; 133 | padding: 5px 10px; 134 | border: 1px solid var(--background-4); 135 | border-bottom: 1px solid var(--background-5); 136 | } 137 | 138 | /* -------------------------- CKEditor5 layout -------------------------- */ 139 | /* 140 | Note - These are the selector paths for various CKEditor5 elements: 141 | 142 | Toolbar: 143 | .ck-editor > .ck-editor__top > .ck-sticky-panel__content > .ck-toolbar > .ck-toolbar__items 144 | 145 | Editor body: 146 | .ck-editor > .ck-editor__main > .ck-content 147 | 148 | Editor body in Source mode: 149 | .ck-editor > .ck-editor__main > .ck-source-editing-area > textarea 150 | */ 151 | 152 | /* Outmost wrapper */ 153 | .ck-editor { 154 | height: 100% !important; 155 | display: flex; 156 | flex-direction: column; 157 | } 158 | /* Wrapper containing .ck-content*/ 159 | .ck-editor > .ck-editor__main { 160 | overflow-y: hidden; 161 | flex-grow: 1; 162 | display: flex; 163 | } 164 | /* Body of the CKEditor where you input content */ 165 | .ck-editor > .ck-editor__main > .ck-content { 166 | flex-grow: 1; 167 | overflow-y: scroll; 168 | padding: 0 42px; 169 | padding-bottom: 20px; 170 | } 171 | 172 | /* Make source editor fullscreen scrollable */ 173 | .ck-source-editing-area, 174 | .ck-source-editing-area > textarea { 175 | height: 100%; 176 | max-height: 100%; 177 | } 178 | .ck-source-editing-area > textarea { 179 | overflow-y: scroll; 180 | } 181 | 182 | /* Remove borders */ 183 | .ck-editor__main > .ck-content, 184 | .ck-source-editing-area > textarea, 185 | .ck-toolbar { 186 | border-width: 0 !important; 187 | } 188 | .ck-editor__main > .ck-content { 189 | border-top: 1px solid var(--background-3) !important; 190 | } 191 | 192 | /* -------------------------- Colors -------------------------- */ 193 | 194 | :root { 195 | /* Main theming variables ----------------------------------------------------------------- */ 196 | /* This is the base color for all text and icons outside the editor body */ 197 | --foreground-1: var(--vscode-editor-foreground); 198 | --foreground-2: var(--vscode-foreground); 199 | --foreground-3: var(--vscode-editorCursor-foreground); 200 | 201 | /* This is the background color for the editor body */ 202 | --background-1: var(--vscode-editor-background); 203 | /* This is the background color for the toolbar */ 204 | --background-2: var(--vscode-editorWidget-background); 205 | 206 | --background-3: var(--vscode-editorHoverWidget-statusBarBackground); 207 | --background-4: var(--vscode-badge-background); 208 | --background-5: var(--vscode-editorHoverWidget-foreground); 209 | 210 | /* From darkest to lightest */ 211 | --shadow-1: rgba(0, 0, 0, 20%); 212 | --shadow-2: rgba(2, 1, 1, 0.1); 213 | --shadow-3: rgba(26, 13, 13, 0.05); 214 | 215 | /* Other */ 216 | --border: var(--background-4); 217 | --focus: var(--vscode-focusBorder); 218 | --focus-dark: var(--vscode-quickInputList-focusBackground); 219 | --semantic-good: hsl(104, 44%, 48%); 220 | --semantic-good-dark: hsl(104, 44%, 30%); 221 | --semantic-warning: orange; 222 | --semantic-bad: hsl(15, 100%, 43%); 223 | --semantic-bad-dark: hsla(9, 100%, 56%, 0.3); 224 | --link-color: var(--vscode-textLink-foreground); 225 | 226 | --ck-color-base-action: hsl(104, 44%, 48%); 227 | 228 | /* -- Non-color theming ------------------------------------------------------------------------ */ 229 | 230 | --vscode-font-family: var(--vscode-editor-font-family); 231 | --vscode-font-weight: normal; 232 | --vscode-font-size: 13px; 233 | --vscode-editor-font-family: var(--vscode-editor-font-family); 234 | --vscode-editor-font-weight: normal; 235 | --vscode-editor-font-size: 14px; 236 | 237 | /* -- Generic colors ------------------------------------------------------------------------ */ 238 | 239 | /* Blue ring around focussed objects */ 240 | --ck-color-base-focus: var(--focus); 241 | /* Background color of selected item in dropdown menu */ 242 | --ck-color-base-active: var(--background-2); 243 | /* Background color of selected item in dropdown menu when focussed */ 244 | --ck-color-base-active-focus: var(--background-2); 245 | --ck-color-base-error: var(--semantic-bad); 246 | --ck-color-base-text: var(--foreground-1); 247 | --ck-color-base-foreground: var(--background-2); 248 | --ck-color-base-background: var(--background-1); 249 | --ck-color-base-border: var(--border); 250 | 251 | --ck-color-focus-border-coordinates: 208, 79%, 51%; 252 | --ck-color-focus-border: var(--ck-color-base-focus); 253 | --ck-color-focus-outer-shadow: var(--shadow-2); 254 | --ck-color-focus-disabled-shadow: var(--shadow-3); 255 | --ck-color-focus-error-shadow: var(--semantic-bad-dark); 256 | --ck-color-text: var(--ck-color-base-text); 257 | --ck-color-shadow-drop: var(--shadow-2); 258 | --ck-color-shadow-drop-active: var(--shadow-3); 259 | --ck-color-shadow-inner: var(--shadow-1); 260 | 261 | /* -- Buttons ------------------------------------------------------------------------------- */ 262 | 263 | --ck-color-button-default-background: transparent; 264 | --ck-color-button-default-hover-background: var(--background-3); 265 | --ck-color-button-default-active-background: var(--background-1); 266 | --ck-color-button-default-active-shadow: var(--shadow-3); 267 | --ck-color-button-default-disabled-background: transparent; 268 | 269 | --ck-color-button-on-background: var(--background-4); 270 | --ck-color-button-on-hover-background: var(--background-3); 271 | --ck-color-button-on-active-background: var(--background-3); 272 | --ck-color-button-on-active-shadow: var(--shadow-1); 273 | --ck-color-button-on-disabled-background: var(--background-1); 274 | 275 | --ck-color-button-action-background: var(--ck-color-base-action); 276 | --ck-color-button-action-hover-background: var(--semantic-good); 277 | --ck-color-button-action-active-background: var(--semantic-good); 278 | --ck-color-button-action-active-shadow: var(--semantic-good-dark); 279 | --ck-color-button-action-disabled-background: var(--semantic-good); 280 | --ck-color-button-action-text: var(--background-1); 281 | 282 | --ck-color-button-save: var(--semantic-good); 283 | --ck-color-button-cancel: var(--semantic-bad); 284 | 285 | --ck-color-switch-button-off-background: var(--background-3); 286 | --ck-color-switch-button-off-hover-background: var(--background-4); 287 | --ck-color-switch-button-on-background: var(--ck-color-button-action-background); 288 | --ck-color-switch-button-on-hover-background: var(--semantic-good); 289 | --ck-color-switch-button-inner-background: var(--background-1); 290 | --ck-color-switch-button-inner-shadow: var(--shadow-1); 291 | 292 | --ck-color-split-button-hover-background: var(--background-1); 293 | --ck-color-split-button-hover-border: var(--border); 294 | 295 | /* -- Dropdown ------------------------------------------------------------------------------ */ 296 | 297 | --ck-color-dropdown-panel-background: var(--background-1); 298 | --ck-color-dropdown-panel-border: var(--border); 299 | 300 | /* -- Input --------------------------------------------------------------------------------- */ 301 | 302 | --ck-color-input-background: var(--background-1); 303 | --ck-color-input-border: var(--border); 304 | --ck-color-input-error-border: var(--ck-color-base-error); 305 | --ck-color-input-text: var(--ck-color-base-text); 306 | --ck-color-input-disabled-background: var(--background-1); 307 | --ck-color-input-disabled-border: var(--background-2); 308 | --ck-color-input-disabled-text: var(--background-3); 309 | 310 | /* -- List ---------------------------------------------------------------------------------- */ 311 | 312 | --ck-color-list-background: var(--background-1); 313 | --ck-color-list-button-hover-background: var(--background-3); 314 | --ck-color-list-button-on-background: var(--background-2); 315 | --ck-color-list-button-on-background-focus: var(--background-4); 316 | --ck-color-list-button-on-text: var(--foreground-1); 317 | 318 | /* -- Panel --------------------------------------------------------------------------------- */ 319 | 320 | --ck-color-panel-background: var(--background-1); 321 | --ck-color-panel-border: var(--border); 322 | 323 | /* -- Toolbar ------------------------------------------------------------------------------- */ 324 | 325 | --ck-color-toolbar-background: var(--background-1); 326 | /* Originally --ck-color-toolbar-background: var(--background-2); */ 327 | --ck-color-toolbar-border: var(--border); 328 | 329 | /* -- Tooltip ------------------------------------------------------------------------------- */ 330 | 331 | --ck-color-tooltip-background: var(--ck-color-base-text); 332 | --ck-color-tooltip-text: var(--background-1); 333 | 334 | /* -- Engine -------------------------------------------------------------------------------- */ 335 | 336 | --ck-color-engine-placeholder-text: hsl(0, 0%, 44%); 337 | 338 | /* -- Upload -------------------------------------------------------------------------------- */ 339 | 340 | --ck-color-upload-bar-background: hsl(209, 92%, 70%); 341 | 342 | /* -- Link -------------------------------------------------------------------------------- */ 343 | 344 | --ck-color-link-default: var(--link-color); 345 | --ck-color-link-selected-background: transparent; 346 | --ck-color-link-fake-selection: var(--link-color); 347 | 348 | /* Editor ------------------------------------------------------------------------------------ */ 349 | 350 | --ck-color-editable-blur-selection: var(--background-4); 351 | } 352 | -------------------------------------------------------------------------------- /ckeditor5-build-markdown/webpack.config.js: -------------------------------------------------------------------------------- 1 | // https://webpack.js.org/configuration/dev-server/ 2 | 3 | const path = require('path'); 4 | const webpack = require('webpack'); 5 | const { bundler, styles } = require('@ckeditor/ckeditor5-dev-utils'); 6 | const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin'); 7 | const TerserPlugin = require('terser-webpack-plugin'); 8 | 9 | const isDevServer = process.env.WEBPACK_DEV_SERVER; 10 | 11 | module.exports = { 12 | devtool: 'source-map', 13 | performance: { hints: false }, 14 | 15 | entry: path.resolve(__dirname, 'src', 'ckeditor.js'), 16 | 17 | output: { 18 | // The name under which the editor will be exported. 19 | library: 'MarkdownEditor', 20 | 21 | path: path.resolve(__dirname, 'build'), 22 | filename: 'ckeditor.js', 23 | libraryTarget: 'umd', 24 | libraryExport: 'default', 25 | }, 26 | devServer: { 27 | static: [ 28 | // eg. /src/ckeditor.js will be served at /ckeditor.js 29 | { 30 | directory: path.join(__dirname, 'src'), 31 | watch: true, 32 | publicPath: '/', 33 | serveIndex: true, 34 | }, 35 | { 36 | directory: path.join(__dirname, 'sample'), 37 | watch: true, 38 | publicPath: '/', 39 | serveIndex: true, 40 | }, 41 | ], 42 | compress: true, 43 | open: true, 44 | }, 45 | optimization: { 46 | minimizer: [ 47 | new TerserPlugin({ 48 | sourceMap: true, 49 | terserOptions: { 50 | output: { 51 | // Preserve CKEditor 5 license comments. 52 | comments: /^!/, 53 | }, 54 | }, 55 | extractComments: false, 56 | }), 57 | ], 58 | }, 59 | 60 | plugins: [ 61 | // Disable CKEditorWebpackPlugin when running the dev server since it clears the translations `outputDirectory` 62 | // See https://github.com/ckeditor/ckeditor5/issues/700 for more information. 63 | ...(isDevServer 64 | ? [] 65 | : [ 66 | new CKEditorWebpackPlugin({ 67 | // UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format. 68 | // When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js). 69 | language: 'en', 70 | // additionalLanguages: 'all', 71 | }), 72 | ]), 73 | new webpack.BannerPlugin({ 74 | banner: bundler.getLicenseBanner(), 75 | raw: true, 76 | }), 77 | ], 78 | 79 | module: { 80 | rules: [ 81 | { 82 | test: /\.svg$/, 83 | use: ['raw-loader'], 84 | }, 85 | { 86 | test: /\.css$/, 87 | use: [ 88 | { 89 | loader: 'style-loader', 90 | options: { 91 | injectType: 'singletonStyleTag', 92 | attributes: { 93 | 'data-cke': true, 94 | }, 95 | }, 96 | }, 97 | 'css-loader', 98 | { 99 | loader: 'postcss-loader', 100 | options: { 101 | postcssOptions: styles.getPostCssConfig({ 102 | themeImporter: { 103 | themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'), 104 | }, 105 | minify: true, 106 | }), 107 | }, 108 | }, 109 | ], 110 | }, 111 | ], 112 | }, 113 | }; 114 | -------------------------------------------------------------------------------- /examples/example.md: -------------------------------------------------------------------------------- 1 | # h1 Heading 2 | 3 | ## h2 Heading 4 | 5 | ### h3 Heading 6 | 7 | #### h4 Heading 8 | 9 | ##### h5 Heading 10 | 11 | ###### h6 Heading 12 | 13 | ## Horizontal Rules 14 | 15 | --- 16 | 17 | --- 18 | 19 | --- 20 | 21 | ## Typographic replacements 22 | 23 | Enable typographer option to see result. 24 | 25 | (c) (C) (r) (R) (tm) (TM) (p) (P) +- 26 | 27 | test.. test... test..... test?..... test!.... 28 | 29 | !!!!!! ???? ,, -- --- 30 | 31 | "Smartypants, double quotes" and 'single quotes' 32 | 33 | ## Emphasis 34 | 35 | **This is bold text** 36 | 37 | **This is bold text** 38 | 39 | _This is italic text_ 40 | 41 | _This is italic text_ 42 | 43 | ~Strikethrough~ 44 | 45 | ## Blockquotes 46 | 47 | > Blockquotes can also be nested... 48 | > 49 | > > ...by using greater-than signs right next to each other... 50 | > > 51 | > > > ...or with spaces between arrows. 52 | 53 | ## Lists 54 | 55 | Unordered 56 | 57 | - Create a list by starting a line with `+`, `-`, or `*` 58 | - Sub-lists are made by indenting 2 spaces: 59 | - Ac tristique libero volutpat at 60 | - Facilisis in pretium nisl aliquet 61 | - Nulla volutpat aliquam velit 62 | - Very easy! 63 | 64 | Ordered 65 | 66 | 1. Lorem ipsum dolor sit amet 67 | 2. Consectetur adipiscing elit 68 | 3. Integer molestie lorem at massa 69 | 70 | ## Code 71 | 72 | Indented code 73 | 74 | ``` 75 | line 1 of code 76 | line 2 of code 77 | line 3 of code 78 | ``` 79 | 80 | Block code with backticks 81 | 82 | ``` 83 | line 1 of code 84 | line 2 of code 85 | line 3 of code 86 | ``` 87 | 88 | ## Tables 89 | 90 | | Option | Description | 91 | | ------ | ----------------------------------------------------------- | 92 | | foo | Lorem ipsum dolor sit amet, | 93 | | bar | Ut enim ad minim veniam, quis nostrud exercitation ullamco. | 94 | | baz | Excepteur sint occaecat cupidatat non proident. | 95 | 96 | ## Links 97 | 98 | [example](https://example.com) 99 | 100 | [example link with hover](https://example.com) 101 | 102 | ## Images 103 | 104 | ![Minion](https://octodex.github.com/images/original.png) 105 | 106 | ## Unsupported Features 107 | 108 | ### Autoconverted hyperlink 109 | 110 | See https://example.com 111 | 112 | ### List start numbering with offset 113 | 114 | 1. foo 115 | 2. bar 116 | 117 | ### Definition List 118 | 119 | First Term 120 | : This is the definition of the first term. 121 | 122 | Second Term 123 | : This is one definition of the second term. 124 | : This is another definition of the second term. 125 | 126 | ### Footnotes 127 | 128 | Footnote 1 link\[^first\]. 129 | Footnote 2 link\[^second\]. 130 | Duplicated footnote reference\[^second\]. 131 | \[^first\]: Footnote 1 text 132 | \[^second\]: Footnote 2 text. 133 | 134 | ### Subscript / Superscript 135 | 136 | O(n2) 137 | H2O 138 | 139 | ### Right aligned table columns 140 | 141 | | Option | Description | 142 | | ------ | ----------------------------------------------------------- | 143 | | foo | Lorem ipsum dolor sit amet, | 144 | | bar | Ut enim ad minim veniam, quis nostrud exercitation ullamco. | 145 | | baz | Excepteur sint occaecat cupidatat non proident. | 146 | 147 | ### Syntax highlighting 148 | 149 | ``` 150 | var foo = function (bar) { 151 | return bar++; 152 | }; 153 | 154 | console.log(foo(5)); 155 | ``` 156 | 157 | ### Inline code 158 | 159 | Inline `code` 160 | -------------------------------------------------------------------------------- /examples/simpleExample.md: -------------------------------------------------------------------------------- 1 | # Header 1 2 | 3 | ## Header 2 4 | 5 | ### Header 3 6 | 7 | #### Header 4 8 | 9 | ##### Header 5 10 | 11 | ###### Header 6 12 | 13 | Text 14 | 15 | - Bullet 1 16 | - Bullet 2 17 | - Bullet 3 18 | 19 | | Header1 | Header2 | Header3 | 20 | | ------- | ------- | ------- | 21 | | Cell1 | Cell2 | Cell3 | 22 | | Cell4 | Cell5 | Cell6 | 23 | -------------------------------------------------------------------------------- /examples/test.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamerose/vscode-markdown-wysiwyg/1fad0f636f428bc21a345fc43689dad7c605ff81/examples/test.txt -------------------------------------------------------------------------------- /examples/test/example1.md: -------------------------------------------------------------------------------- 1 | ## Headings 2 | 3 | # h1 Heading 4 | 5 | ## h2 Heading 6 | 7 | ### h3 Heading 8 | 9 | #### h4 Heading 10 | 11 | ##### h5 Heading 12 | 13 | ###### h6 Heading 14 | 15 | ## Horizontal Rules 16 | 17 | --- 18 | 19 | --- 20 | 21 | --- 22 | 23 | ## Typographic replacements 24 | 25 | Enable typographer option to see result. 26 | 27 | (c) (C) (r) (R) (tm) (TM) (p) (P) +- 28 | 29 | test.. test... test..... test?..... test!.... 30 | 31 | !!!!!! ???? ,, -- --- 32 | 33 | "Smartypants, double quotes" and 'single quotes' 34 | 35 | ## Emphasis 36 | 37 | **This is bold text** 38 | 39 | **This is bold text** 40 | 41 | _This is italic text_ 42 | 43 | _This is italic text_ 44 | 45 | ~Strikethrough~ 46 | 47 | ## Blockquotes 48 | 49 | > Blockquotes can also be nested... 50 | > 51 | > > ...by using greater-than signs right next to each other... 52 | > > 53 | > > > ...or with spaces between arrows. 54 | 55 | ## Lists 56 | 57 | Unordered 58 | 59 | * Create a list by starting a line with `+`, `-`, or `*` 60 | * Sub-lists are made by indenting 2 spaces: 61 | * Ac tristique libero volutpat at 62 | * Facilisis in pretium nisl aliquet 63 | * Nulla volutpat aliquam velit 64 | * Very easy! 65 | 66 | Ordered 67 | 68 | 1. Lorem ipsum dolor sit amet 69 | 2. Consectetur adipiscing elit 70 | 3. Integer molestie lorem at massa 71 | 72 | ## Code 73 | 74 | Indented code 75 | 76 | ```plaintext 77 | line 1 of code 78 | line 2 of code 79 | line 3 of code 80 | ``` 81 | 82 | Block code with backticks 83 | 84 | ```plaintext 85 | line 1 of code 86 | line 2 of code 87 | line 3 of code 88 | ``` 89 | 90 | ## Tables 91 | 92 | | Option | Description | 93 | | --- | --- | 94 | | foo | Lorem ipsum dolor sit amet, | 95 | | bar | Ut enim ad minim veniam, quis nostrud exercitation ullamco. | 96 | | baz | Excepteur sint occaecat cupidatat non proident. | 97 | 98 | ## Links 99 | 100 | [example](https://example.com) 101 | 102 | [example link with hover](https://example.com) 103 | 104 | ## Images 105 | 106 | ![Minion](https://octodex.github.com/images/original.png) 107 | 108 | ## Unsupported Features 109 | 110 | ### Autoconverted hyperlink 111 | 112 | See https://example.com 113 | 114 | ### List start numbering with offset 115 | 116 | 1. foo 117 | 2. bar 118 | 119 | ### Definition List 120 | 121 | First Term 122 | : This is the definition of the first term. 123 | 124 | Second Term 125 | : This is one definition of the second term. 126 | : This is another definition of the second term. 127 | 128 | ### Footnotes 129 | 130 | Footnote 1 link\[^first\]. 131 | Footnote 2 link\[^second\]. 132 | Duplicated footnote reference\[^second\]. 133 | \[^first\]: Footnote 1 text 134 | \[^second\]: Footnote 2 text. 135 | 136 | ### Subscript / Superscript 137 | 138 | O(n2) 139 | H2O 140 | 141 | ### Right aligned table columns 142 | 143 | | Option | Description | 144 | | --- | --- | 145 | | foo | Lorem ipsum dolor sit amet, | 146 | | bar | Ut enim ad minim veniam, quis nostrud exercitation ullamco. | 147 | | baz | Excepteur sint occaecat cupidatat non proident. | 148 | 149 | ### Syntax highlighting 150 | 151 | ```plaintext 152 | var foo = function (bar) { 153 | return bar++; 154 | }; 155 | 156 | console.log(foo(5)); 157 | ``` 158 | 159 | ### Inline code 160 | 161 | Inline `code` -------------------------------------------------------------------------------- /examples/test/example2.md: -------------------------------------------------------------------------------- 1 | ## Headings 2 | 3 | # h1 Heading 4 | 5 | ## h2 Heading 6 | 7 | ### h3 Heading 8 | 9 | #### h4 Heading 10 | 11 | ##### h5 Heading 12 | 13 | ###### h6 Heading 14 | 15 | ## Horizontal Rules 16 | 17 | --- 18 | 19 | --- 20 | 21 | --- 22 | 23 | ## Typographic replacements 24 | 25 | Enable typographer option to see result. 26 | 27 | (c) (C) (r) (R) (tm) (TM) (p) (P) +- 28 | 29 | test.. test... test..... test?..... test!.... 30 | 31 | !!!!!! ???? ,, -- --- 32 | 33 | "Smartypants, double quotes" and 'single quotes' 34 | 35 | ## Emphasis 36 | 37 | **This is bold text** 38 | 39 | **This is bold text** 40 | 41 | _This is italic text_ 42 | 43 | _This is italic text_ 44 | 45 | ~Strikethrough~ 46 | 47 | ## Blockquotes 48 | 49 | > Blockquotes can also be nested... 50 | > 51 | > > ...by using greater-than signs right next to each other... 52 | > > 53 | > > > ...or with spaces between arrows. 54 | 55 | ## Lists 56 | 57 | Unordered 58 | 59 | * Create a list by starting a line with `+`, `-`, or `*` 60 | * Sub-lists are made by indenting 2 spaces: 61 | * Ac tristique libero volutpat at 62 | * Facilisis in pretium nisl aliquet 63 | * Nulla volutpat aliquam velit 64 | * Very easy! 65 | 66 | Ordered 67 | 68 | 1. Lorem ipsum dolor sit amet 69 | 2. Consectetur adipiscing elit 70 | 3. Integer molestie lorem at massa 71 | 72 | ## Code 73 | 74 | Indented code 75 | 76 | ```plaintext 77 | line 1 of code 78 | line 2 of code 79 | line 3 of code 80 | ``` 81 | 82 | Block code with backticks 83 | 84 | ```plaintext 85 | line 1 of code 86 | line 2 of code 87 | line 3 of code 88 | ``` 89 | 90 | ## Tables 91 | 92 | | Option | Description | 93 | | --- | --- | 94 | | foo | Lorem ipsum dolor sit amet, | 95 | | bar | Ut enim ad minim veniam, quis nostrud exercitation ullamco. | 96 | | baz | Excepteur sint occaecat cupidatat non proident. | 97 | 98 | ## Links 99 | 100 | [example](https://example.com) 101 | 102 | [example link with hover](https://example.com) 103 | 104 | ## Images 105 | 106 | ![Minion](https://octodex.github.com/images/original.png) 107 | 108 | ## Unsupported Features 109 | 110 | ### Autoconverted hyperlink 111 | 112 | See https://example.com 113 | 114 | ### List start numbering with offset 115 | 116 | 1. foo 117 | 2. bar 118 | 119 | ### Definition List 120 | 121 | First Term 122 | : This is the definition of the first term. 123 | 124 | Second Term 125 | : This is one definition of the second term. 126 | : This is another definition of the second term. 127 | 128 | ### Footnotes 129 | 130 | Footnote 1 link\[^first\]. 131 | Footnote 2 link\[^second\]. 132 | Duplicated footnote reference\[^second\]. 133 | \[^first\]: Footnote 1 text 134 | \[^second\]: Footnote 2 text. 135 | 136 | ### Subscript / Superscript 137 | 138 | O(n2) 139 | H2O 140 | 141 | ### Right aligned table columns 142 | 143 | | Option | Description | 144 | | --- | --- | 145 | | foo | Lorem ipsum dolor sit amet, | 146 | | bar | Ut enim ad minim veniam, quis nostrud exercitation ullamco. | 147 | | baz | Excepteur sint occaecat cupidatat non proident. | 148 | 149 | ### Syntax highlighting 150 | 151 | ```plaintext 152 | var foo = function (bar) { 153 | return bar++; 154 | }; 155 | 156 | console.log(foo(5)); 157 | ``` 158 | 159 | ### Inline code 160 | 161 | Inline `code` -------------------------------------------------------------------------------- /examples/test/example3.md: -------------------------------------------------------------------------------- 1 | ## Headings 2 | 3 | # h1 Heading 4 | 5 | ## h2 Heading 6 | 7 | ### h3 Heading 8 | 9 | #### h4 Heading 10 | 11 | ##### h5 Heading 12 | 13 | ###### h6 Heading 14 | 15 | ## Horizontal Rules 16 | 17 | --- 18 | 19 | --- 20 | 21 | --- 22 | 23 | ## Typographic replacements 24 | 25 | Enable typographer option to see result. 26 | 27 | (c) (C) (r) (R) (tm) (TM) (p) (P) +- 28 | 29 | test.. test... test..... test?..... test!.... 30 | 31 | !!!!!! ???? ,, -- --- 32 | 33 | "Smartypants, double quotes" and 'single quotes' 34 | 35 | ## Emphasis 36 | 37 | **This is bold text** 38 | 39 | **This is bold text** 40 | 41 | _This is italic text_ 42 | 43 | _This is italic text_ 44 | 45 | ~Strikethrough~ 46 | 47 | ## Blockquotes 48 | 49 | > Blockquotes can also be nested... 50 | > 51 | > > ...by using greater-than signs right next to each other... 52 | > > 53 | > > > ...or with spaces between arrows. 54 | 55 | ## Lists 56 | 57 | Unordered 58 | 59 | * Create a list by starting a line with `+`, `-`, or `*` 60 | * Sub-lists are made by indenting 2 spaces: 61 | * Ac tristique libero volutpat at 62 | * Facilisis in pretium nisl aliquet 63 | * Nulla volutpat aliquam velit 64 | * Very easy! 65 | 66 | Ordered 67 | 68 | 1. Lorem ipsum dolor sit amet 69 | 2. Consectetur adipiscing elit 70 | 3. Integer molestie lorem at massa 71 | 72 | ## Code 73 | 74 | Indented code 75 | 76 | ```plaintext 77 | line 1 of code 78 | line 2 of code 79 | line 3 of code 80 | ``` 81 | 82 | Block code with backticks 83 | 84 | ```plaintext 85 | line 1 of code 86 | line 2 of code 87 | line 3 of code 88 | ``` 89 | 90 | ## Tables 91 | 92 | | Option | Description | 93 | | --- | --- | 94 | | foo | Lorem ipsum dolor sit amet, | 95 | | bar | Ut enim ad minim veniam, quis nostrud exercitation ullamco. | 96 | | baz | Excepteur sint occaecat cupidatat non proident. | 97 | 98 | ## Links 99 | 100 | [example](https://example.com) 101 | 102 | [example link with hover](https://example.com) 103 | 104 | ## Images 105 | 106 | ![Minion](https://octodex.github.com/images/original.png) 107 | 108 | ## Unsupported Features 109 | 110 | ### Autoconverted hyperlink 111 | 112 | See https://example.com 113 | 114 | ### List start numbering with offset 115 | 116 | 1. foo 117 | 2. bar 118 | 119 | ### Definition List 120 | 121 | First Term 122 | : This is the definition of the first term. 123 | 124 | Second Term 125 | : This is one definition of the second term. 126 | : This is another definition of the second term. 127 | 128 | ### Footnotes 129 | 130 | Footnote 1 link\[^first\]. 131 | Footnote 2 link\[^second\]. 132 | Duplicated footnote reference\[^second\]. 133 | \[^first\]: Footnote 1 text 134 | \[^second\]: Footnote 2 text. 135 | 136 | ### Subscript / Superscript 137 | 138 | O(n2) 139 | H2O 140 | 141 | ### Right aligned table columns 142 | 143 | | Option | Description | 144 | | --- | --- | 145 | | foo | Lorem ipsum dolor sit amet, | 146 | | bar | Ut enim ad minim veniam, quis nostrud exercitation ullamco. | 147 | | baz | Excepteur sint occaecat cupidatat non proident. | 148 | 149 | ### Syntax highlighting 150 | 151 | ```plaintext 152 | var foo = function (bar) { 153 | return bar++; 154 | }; 155 | 156 | console.log(foo(5)); 157 | ``` 158 | 159 | ### Inline code 160 | 161 | Inline `code` -------------------------------------------------------------------------------- /examples/tinyExample.md: -------------------------------------------------------------------------------- 1 | - foo 2 | - bar 3 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "markdown-wysiwyg", 3 | "displayName": "Markdown Editor", 4 | "description": "A powerful markdown WYSIWYG editor", 5 | "version": "0.7.7", 6 | "publisher": "adamerose", 7 | "private": true, 8 | "license": "GPLv3", 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/adamerose/vscode-markdown-wysiwyg" 12 | }, 13 | "engines": { 14 | "vscode": "^1.32.0" 15 | }, 16 | "categories": [ 17 | "Programming Languages", 18 | "Formatters" 19 | ], 20 | "tags": [ 21 | "markdown", 22 | "editor", 23 | "wysiwyg", 24 | "ckeditor" 25 | ], 26 | "activationEvents": [ 27 | "onCustomEditor:markdownEditor.customEditor", 28 | "onCommand:markdownEditor.openCustomEditor" 29 | ], 30 | "main": "./dist/extension", 31 | "contributes": { 32 | "customEditors": [ 33 | { 34 | "viewType": "markdownEditor.customEditor", 35 | "displayName": "Markdown WYSIWYG Editor", 36 | "selector": [ 37 | { 38 | "filenamePattern": "*.md" 39 | } 40 | ], 41 | "priority": "default" 42 | } 43 | ], 44 | "commands": [ 45 | { 46 | "command": "markdownEditor.openCustomEditor", 47 | "title": "Open WYSIWYG Editor", 48 | "icon": "$(preview)" 49 | }, 50 | { 51 | "command": "markdownEditor.openDefaultEditor", 52 | "title": "Open Default Editor", 53 | "icon": "$(note)" 54 | } 55 | ], 56 | "menus": { 57 | "editor/title": [ 58 | { 59 | "command": "markdownEditor.openCustomEditor", 60 | "group": "navigation@-1", 61 | "when": "resourceLangId == markdown && !markdownEditor.editorIsActive" 62 | }, 63 | { 64 | "command": "markdownEditor.openDefaultEditor", 65 | "group": "navigation@-1", 66 | "when": "resourceLangId == markdown && markdownEditor.editorIsActive" 67 | }, 68 | { 69 | "command": "markdown.showPreviewToSide", 70 | "group": "navigation@1", 71 | "when": "resourceLangId == markdown && markdownEditor.editorIsActive" 72 | } 73 | ] 74 | }, 75 | "keybindings": [ 76 | { 77 | "command": "markdownEditor.openCustomEditor", 78 | "key": "ctrl+shift+e", 79 | "mac": "cmd+shift+e", 80 | "when": "resourceLangId == markdown && !markdownEditor.editorIsActive" 81 | }, 82 | { 83 | "command": "markdownEditor.openDefaultEditor", 84 | "key": "ctrl+shift+e", 85 | "mac": "cmd+shift+e", 86 | "when": "resourceLangId == markdown && markdownEditor.editorIsActive" 87 | } 88 | ] 89 | }, 90 | "scripts": { 91 | "vscode:prepublish": "webpack --mode production", 92 | "webpack": "webpack --mode development", 93 | "webpack-dev": "webpack --mode development --watch", 94 | "test-compile": "tsc -p ./", 95 | "lint": "eslint . --ext .ts,.tsx" 96 | }, 97 | "devDependencies": { 98 | "@types/node": "^12.12.0", 99 | "@types/vscode": "^1.32.0", 100 | "@typescript-eslint/eslint-plugin": "^4.16.0", 101 | "@typescript-eslint/parser": "^4.16.0", 102 | "eslint": "^7.21.0", 103 | "ts-loader": "^7.0.5", 104 | "typescript": "^4.4.3", 105 | "webpack": "^5.75.0", 106 | "webpack-cli": "^5.0.1" 107 | }, 108 | "dependencies": { 109 | "prettier": "^2.8.1" 110 | } 111 | } 112 | -------------------------------------------------------------------------------- /src/dispose.ts: -------------------------------------------------------------------------------- 1 | import * as vscode from 'vscode'; 2 | 3 | export function disposeAll(disposables: vscode.Disposable[]): void { 4 | while (disposables.length) { 5 | const item = disposables.pop(); 6 | if (item) { 7 | item.dispose(); 8 | } 9 | } 10 | } 11 | 12 | export abstract class Disposable { 13 | private _isDisposed = false; 14 | 15 | protected _disposables: vscode.Disposable[] = []; 16 | 17 | public dispose(): any { 18 | if (this._isDisposed) { 19 | return; 20 | } 21 | this._isDisposed = true; 22 | disposeAll(this._disposables); 23 | } 24 | 25 | protected _register(value: T): T { 26 | if (this._isDisposed) { 27 | value.dispose(); 28 | } else { 29 | this._disposables.push(value); 30 | } 31 | return value; 32 | } 33 | 34 | protected get isDisposed(): boolean { 35 | return this._isDisposed; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/extension.ts: -------------------------------------------------------------------------------- 1 | import { debuglog } from 'util'; 2 | import * as vscode from 'vscode'; 3 | import { MarkdownEditorProvider } from './markdownEditor'; 4 | 5 | export const extensionState: { 6 | activeDocument: vscode.TextDocument | undefined; 7 | activeWebviewPanel: vscode.WebviewPanel | undefined; 8 | } = { 9 | // Need to manually track the current webview & document, since with a 10 | // CustomTextEditor, vscode.window.activeTextEditor is always undefined 11 | // https://github.com/microsoft/vscode/issues/102110#issuecomment-656868579 12 | activeDocument: undefined, 13 | activeWebviewPanel: undefined, 14 | }; 15 | 16 | export function activate(context: vscode.ExtensionContext) { 17 | console.log('markdownEditor activated!'); 18 | 19 | // Register our custom editor providers 20 | context.subscriptions.push(MarkdownEditorProvider.register(context)); 21 | 22 | // Helper method to register commands and push subscription 23 | function registerCommand(command: string, callback: (...args: any[]) => any) { 24 | context.subscriptions.push(vscode.commands.registerCommand(command, callback)); 25 | } 26 | 27 | registerCommand('markdownEditor.openCustomEditor', async (uri: vscode.Uri) => { 28 | // Sanity check. These cases shouldn't happen 29 | if (vscode.window.activeTextEditor === undefined) { 30 | vscode.window.showErrorMessage('No active text editor.'); 31 | return; 32 | } 33 | if (vscode.window.activeTextEditor?.document.languageId !== 'markdown') { 34 | vscode.window.showErrorMessage('Active editor is not markdown.'); 35 | return; 36 | } 37 | 38 | // Set URI to active editor if not provided 39 | uri = uri ?? vscode.window.activeTextEditor?.document.uri; 40 | 41 | vscode.commands.executeCommand('workbench.action.closeActiveEditor').then(() => { 42 | vscode.commands.executeCommand('vscode.openWith', uri, MarkdownEditorProvider.viewType); 43 | }); 44 | }); 45 | 46 | registerCommand('markdownEditor.openDefaultEditor', async (uri: vscode.Uri) => { 47 | // Sanity check. These cases shouldn't happen 48 | if (extensionState?.activeDocument?.uri === undefined) { 49 | vscode.window.showErrorMessage('extensionState?.activeDocument?.uri is undefined.'); 50 | return; 51 | } 52 | 53 | uri = uri ?? extensionState?.activeDocument?.uri; 54 | vscode.commands.executeCommand('workbench.action.closeActiveEditor').then(() => { 55 | vscode.commands.executeCommand('vscode.openWith', uri, 'default'); 56 | }); 57 | }); 58 | } 59 | -------------------------------------------------------------------------------- /src/markdownEditor.ts: -------------------------------------------------------------------------------- 1 | import { time } from 'console'; 2 | import * as vscode from 'vscode'; 3 | import { extensionState } from './extension'; 4 | 5 | const prettier = require('prettier'); 6 | 7 | export class MarkdownEditorProvider implements vscode.CustomTextEditorProvider { 8 | public static register(context: vscode.ExtensionContext): vscode.Disposable { 9 | const provider = new MarkdownEditorProvider(context); 10 | const providerRegistration = vscode.window.registerCustomEditorProvider( 11 | MarkdownEditorProvider.viewType, 12 | provider, 13 | { 14 | webviewOptions: { retainContextWhenHidden: true }, 15 | } 16 | ); 17 | return providerRegistration; 18 | } 19 | 20 | static readonly viewType = 'markdownEditor.customEditor'; 21 | 22 | constructor(private readonly context: vscode.ExtensionContext) {} 23 | 24 | // Called when our custom editor is opened. 25 | public async resolveCustomTextEditor( 26 | document: vscode.TextDocument, 27 | webviewPanel: vscode.WebviewPanel, 28 | _token: vscode.CancellationToken 29 | ): Promise { 30 | // Setup initial webview HTML and settings 31 | webviewPanel.webview.options = { enableScripts: true }; 32 | webviewPanel.webview.html = this.getHtmlForWebview(webviewPanel.webview); 33 | 34 | // Update global state when a webview is focused. 35 | function handleFocusChange(panel: vscode.WebviewPanel, initialLoadFlag = false) { 36 | console.log('handleFocusChange', panel.active); 37 | if (panel.active) { 38 | extensionState.activeDocument = document; 39 | extensionState.activeWebviewPanel = panel; 40 | // This is used in the contibution point "when" clauses indicating which icons and hotkeys to activate 41 | vscode.commands 42 | .executeCommand('setContext', 'markdownEditor.editorIsActive', true) 43 | .then(() => { 44 | console.log('markdownEditor.editorIsActive', true); 45 | }); 46 | } else if (!panel.active && panel === extensionState.activeWebviewPanel) { 47 | vscode.commands 48 | .executeCommand('setContext', 'markdownEditor.editorIsActive', false) 49 | .then(() => { 50 | console.log('markdownEditor.editorIsActive', false); 51 | }); 52 | } 53 | 54 | console.log( 55 | `${initialLoadFlag ? '(Initial Load)' : '(onDidChangeViewState)'} Active: ${ 56 | panel.active 57 | } - ${document?.uri.toString()}` 58 | ); 59 | } 60 | 61 | // We need to manually trigger this once inside of resolveCustomTextEditor since onDidChangeViewState does not run on initial load. 62 | handleFocusChange(webviewPanel, true); 63 | 64 | webviewPanel.onDidChangeViewState((e) => { 65 | handleFocusChange(e.webviewPanel); 66 | }); 67 | 68 | // Initial scroll sync 69 | webviewPanel.webview.postMessage({ 70 | type: 'scrollChanged', 71 | scrollTop: document.lineAt(0).range.start.line, 72 | }); 73 | 74 | //////////////////////////////////////////////////////////////////////////////////////// 75 | // Hook up event handlers so that we can synchronize the webview with the text document. 76 | // 77 | // The text document acts as our model, so we have to sync changes in the document to our 78 | // editor and sync changes in the editor back to the document. 79 | // 80 | // Remember that a single text document can also be shared between multiple custom 81 | // editors (this happens for example when you split a custom editor) 82 | 83 | function updateWebview() { 84 | let text = document.getText(); 85 | 86 | // Change EOL to \n because that's what CKEditor5 uses internally 87 | text = text.replace(/(?:\r\n|\r|\n)/g, '\n'); 88 | 89 | console.log('updateWebview', [JSON.stringify(text)]); 90 | webviewPanel.webview.postMessage({ type: 'documentChanged', text: text }); 91 | } 92 | 93 | const saveDocumentSubscription = vscode.workspace.onDidSaveTextDocument((e) => { 94 | console.log('Saved Document'); 95 | updateWebview(); 96 | }); 97 | 98 | const changeDocumentSubscription = vscode.workspace.onDidChangeTextDocument((e) => { 99 | console.log('Changed Document: ', [JSON.stringify(e.document.getText())]); 100 | }); 101 | 102 | const onDidChangeTextEditorVisibleRanges = vscode.window.onDidChangeTextEditorVisibleRanges( 103 | (e) => { 104 | console.log('onDidChangeTextEditorVisibleRanges: ', [JSON.stringify(e)]); 105 | if (e.textEditor.document === document) { 106 | // Sync scroll from editor to webview 107 | webviewPanel.webview.postMessage({ 108 | type: 'scrollChanged', 109 | scrollTop: e.textEditor.visibleRanges[0].start.line, 110 | }); 111 | } 112 | } 113 | ); 114 | 115 | // Make sure we get rid of the listener when our editor is closed. 116 | webviewPanel.onDidDispose(() => { 117 | console.log('Disposed1'); 118 | if (extensionState.activeWebviewPanel === webviewPanel) { 119 | vscode.commands 120 | .executeCommand('setContext', 'markdownEditor.editorIsActive', false) 121 | .then(() => { 122 | console.log('markdownEditor.editorIsActive', false); 123 | }); 124 | } 125 | console.log('Disposed2'); 126 | changeDocumentSubscription.dispose(); 127 | saveDocumentSubscription.dispose(); 128 | }); 129 | 130 | // Receive message from the webview. 131 | webviewPanel.webview.onDidReceiveMessage((e) => { 132 | console.log('onDidReceiveMessage: ', [JSON.stringify(e)]); 133 | switch (e.type) { 134 | case 'webviewChanged': 135 | this.updateTextDocument(document, e.text); 136 | return; 137 | case 'initialized': 138 | updateWebview(); 139 | return; 140 | case 'plainPaste': 141 | vscode.commands.executeCommand('editor.action.clipboardPasteAction'); 142 | } 143 | }); 144 | } 145 | 146 | // Get the static html used for the editor webviews. 147 | private getHtmlForWebview(webview: vscode.Webview): string { 148 | // Local path to script and css for the webview 149 | const initScriptUri = webview.asWebviewUri( 150 | vscode.Uri.joinPath(this.context.extensionUri, 'src', 'markdownEditorInitScript.js') 151 | ); 152 | const ckeditorUri = webview.asWebviewUri( 153 | vscode.Uri.joinPath( 154 | this.context.extensionUri, 155 | ...'ckeditor5-build-markdown/build/ckeditor.js'.split('/') 156 | ) 157 | ); 158 | 159 | // Use a nonce to only allow a specific script to be run. 160 | const nonce = getNonce(); 161 | 162 | const html = String.raw; // https://prettier.io/docs/en/options.html#embedded-language-formatting 163 | return html/* html */ ` 164 | 165 | 166 | 167 | 168 | 169 | 170 | Markdown WYSIWYG Editor 171 | 172 | 173 |
174 | 175 | 176 | 187 | 188 | 189 | `; 190 | } 191 | 192 | // Save new content to the text document 193 | private updateTextDocument(document: vscode.TextDocument, text: any) { 194 | console.log('VS Code started updateTextDocument', [JSON.stringify(text)]); 195 | 196 | let rawText = text; 197 | 198 | // Autoformat the markdown text using Prettier 199 | text = prettier.format(text, { 200 | parser: 'markdown', 201 | }); 202 | 203 | let prettierText = text; 204 | 205 | // Standardize text EOL character to match document 206 | // https://code.visualstudio.com/api/references/vscode-api#EndOfLine 207 | const eol_chars = document?.eol == 2 ? '\r\n' : '\n'; 208 | text = text.replace(/(?:\r\n|\r|\n)/g, eol_chars); 209 | 210 | let finalText = text; 211 | let fileText = document?.getText(); 212 | 213 | if (text != fileText) { 214 | // TODO - Apply edits to the document instead of replacing the whole thing 215 | const newEdit = new vscode.WorkspaceEdit(); 216 | newEdit.replace(document.uri, new vscode.Range(0, 0, document.lineCount, 0), text); 217 | vscode.workspace.applyEdit(newEdit); 218 | 219 | // console.debug('Updating Document because content changed'); 220 | // console.debug('rawText', JSON.stringify(rawText)); 221 | // console.debug('prettierText', JSON.stringify(prettierText)); 222 | // console.debug('finalText', JSON.stringify(finalText)); 223 | // console.debug('fileText', JSON.stringify(fileText)); 224 | } 225 | } 226 | } 227 | 228 | function getNonce() { 229 | let text = ''; 230 | const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; 231 | for (let i = 0; i < 32; i++) { 232 | text += possible.charAt(Math.floor(Math.random() * possible.length)); 233 | } 234 | return text; 235 | } 236 | -------------------------------------------------------------------------------- /src/markdownEditorInitScript.js: -------------------------------------------------------------------------------- 1 | //@ts-check 2 | 3 | // Get a reference to the VS Code webview api. 4 | // We use this API to post messages back to our extension. 5 | 6 | // This was defined in markdownEditor.ts in the HTML snippet initializing CKEditor5. This line just stops IDE complaining. 7 | const editor = window.editor; 8 | 9 | // This will store the latest saved data from VS Code 10 | editor.savedData = null; 11 | 12 | editor.suppressNextDataChangeEvent = false; 13 | 14 | // eslint-disable-next-line no-undef 15 | const vscode = acquireVsCodeApi(); 16 | window.vscode = vscode; 17 | 18 | // We use this to track whether the document's initial content has been set yet 19 | var initializedFlag = false; 20 | 21 | /** 22 | * Render the document in the webview. 23 | */ 24 | function setEditorContent(/** @type {string} */ text) { 25 | console.log('setEditorContent', { initializedFlag, text: JSON.stringify(text) }); 26 | 27 | // We use setData instead of editor.model.change for initial content otherwise undo history starts with empty content 28 | if (!initializedFlag) { 29 | editor.setData(text); 30 | initializedFlag = true; 31 | return; 32 | } 33 | 34 | // If the new text doesn't match the editor's current text, we need to update it but preserve the selection. 35 | if (editor.getData() != text) { 36 | // Save selection so we can restore it after replacing the content 37 | const userSelection = editor.model.document.selection.getFirstRange(); 38 | 39 | // Replace all content but calling insertContent with the whole document range as a selection 40 | const selectionRange = editor.model.createRangeIn(editor.model.document.getRoot()); 41 | const viewFragment = editor.data.processor.toView(text); 42 | const modelFragment = editor.data.toModel(viewFragment); 43 | editor.model.insertContent(modelFragment, selectionRange); 44 | 45 | editor.model.change((writer) => { 46 | try { 47 | writer.setSelection(userSelection); 48 | } catch { 49 | // Backup selection to use if userSelection became invalid after replacing content 50 | // Usually userSelection should only become invalid if the document got shorter (its now out of bounds) 51 | // so in that case we should put the cursor at the end of the last line in the document 52 | let lastElement = editor.model.document 53 | .getRoot() 54 | .getChild(editor.model.document.getRoot().childCount - 1); 55 | editor.model.change((writer) => { 56 | writer.setSelection(lastElement, 'after'); 57 | }); 58 | } 59 | }); 60 | } 61 | 62 | // Keep track of this to check if document is really dirty in change:data event 63 | editor.savedData = editor.getData(); 64 | } 65 | 66 | // Add listener for user modifying text in the editor 67 | editor.model.document.on('change:data', (e) => { 68 | // This happens when the even was triggered by documentChanged event rather than user input 69 | if (editor.suppressNextDataChangeEvent) { 70 | editor.suppressNextDataChangeEvent = false; 71 | return; 72 | } 73 | 74 | const data = editor.getData(); 75 | vscode.postMessage({ 76 | type: 'webviewChanged', 77 | text: data, 78 | }); 79 | 80 | editor.dirty = true; 81 | }); 82 | 83 | // Handle messages sent from the extension to the webview 84 | window.addEventListener('message', (event) => { 85 | console.log('Recieved Message', { 'event.data': JSON.stringify(event.data) }); 86 | const message = event.data; // The data that the extension sent 87 | switch (message.type) { 88 | case 'documentChanged': { 89 | const text = message.text; 90 | editor.suppressNextDataChangeEvent = true; 91 | setEditorContent(text); 92 | 93 | // This state is returned in the call to `vscode.getState` below when a webview is reloaded. 94 | vscode.setState({ text }); 95 | } 96 | case 'scrollChanged': { 97 | // TODO 98 | } 99 | } 100 | }); 101 | 102 | // Webviews are normally torn down when not visible and re-created when they become visible again. 103 | // State lets us save information across these re-loads 104 | const state = vscode.getState(); 105 | if (state) { 106 | setEditorContent(state.text); 107 | } 108 | 109 | vscode.postMessage({ 110 | type: 'initialized', 111 | }); 112 | -------------------------------------------------------------------------------- /src/util.ts: -------------------------------------------------------------------------------- 1 | export function getNonce() { 2 | let text = ''; 3 | const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; 4 | for (let i = 0; i < 32; i++) { 5 | text += possible.charAt(Math.floor(Math.random() * possible.length)); 6 | } 7 | return text; 8 | } 9 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es2019", 5 | "lib": ["ES2019"], 6 | "outDir": "out", 7 | "sourceMap": true, 8 | "strict": true, 9 | "rootDir": "src" 10 | }, 11 | "include": [ 12 | "src/**/*.ts", 13 | "src/**/*.js", 14 | "./node_modules/vscode/vscode.d.ts", 15 | "./node_modules/vscode/lib/*" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | /*--------------------------------------------------------------------------------------------- 2 | * Copyright (c) Microsoft Corporation. All rights reserved. 3 | * Licensed under the MIT License. See License.txt in the project root for license information. 4 | *--------------------------------------------------------------------------------------------*/ 5 | 6 | //@ts-check 7 | 8 | 'use strict'; 9 | 10 | const path = require('path'); 11 | 12 | /**@type {import('webpack').Configuration}*/ 13 | const config = { 14 | target: 'node', // vscode extensions run in a Node.js-context 📖 -> https://webpack.js.org/configuration/node/ 15 | 16 | entry: './src/extension.ts', // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/ 17 | output: { 18 | // the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/ 19 | path: path.resolve(__dirname, 'dist'), 20 | filename: 'extension.js', 21 | libraryTarget: 'commonjs2', 22 | devtoolModuleFilenameTemplate: '../[resource-path]', 23 | }, 24 | devtool: 'source-map', 25 | externals: { 26 | vscode: 'commonjs vscode', // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, 📖 -> https://webpack.js.org/configuration/externals/ 27 | }, 28 | resolve: { 29 | // support reading TypeScript and JavaScript files, 📖 -> https://github.com/TypeStrong/ts-loader 30 | extensions: ['.ts', '.js'], 31 | }, 32 | module: { 33 | rules: [ 34 | { 35 | test: /\.ts$/, 36 | exclude: /node_modules/, 37 | use: [ 38 | { 39 | loader: 'ts-loader', 40 | options: { 41 | compilerOptions: { 42 | module: 'es6', // override `tsconfig.json` so that TypeScript emits native JavaScript modules. 43 | }, 44 | }, 45 | }, 46 | ], 47 | }, 48 | ], 49 | }, 50 | }; 51 | 52 | module.exports = config; 53 | --------------------------------------------------------------------------------