Getting Started - slugcat-dev/mark-ed GitHub Wiki

For users working with a bundler (like Vite), start by installing the package from npm:

npm install @slugcat-dev/mark-ed

If you are hosting a static site, you can skip this step and include the package via a CDN like jsDelivr or unpkg instead.

First, add a simple <div> element for the editor, and a <script> with type="module" for the code. You can either add your code directly to the script tag or put it into an extra file. Import the package with the correct code for your setup.

<script type="module" src="my-editor.ts"></script>
<div id="my-editor"></div>

// Import the installed npm package
import { Editor } from '@slugcat-dev/mark-ed'

// Import from jsDelivr
import { Editor } from 'https://esm.run/@slugcat-dev/mark-ed'

Now, you can initialize a new Editor instance. You can pass either the editor element's ID or a reference to the element as the first argument. In addition, you can provide optional configuration options as the second argument. For more details, see Editor Configuration.

// Create a new Editor instance with optional configuration
const editor = new Editor('my-editor', {
  content: 'Hello, `mark-ed`!',
  tabSize: 4
})

And that's it! Your editor is ready to use.

While your editor already works as it is, it still looks a bit raw. You can add some CSS to improove its appearance. You also need CSS to use features like hideMarks.

You also most likely don't want just a fancy editor without later using the content, for example to save it to a database. To access the content of the editor, you can use editor.content. Refer to the API Documentation for all available editor properties and methods. You can also take a look at the code for the demo in the dev directory.

// Log the editor content to the console after the user is done editing
editor.root.addEventListener('blur', () => {
  console.log('Editor content:', editor.content)
})

From here on, you can further customize the editor with custom keybinds or Markdown rules.