### Install Dependencies

Source: https://github.com/ionaru/easy-markdown-editor/blob/master/CONTRIBUTING.md

Install all necessary project dependencies using npm ci for a clean installation.

```bash
npm ci
```

--------------------------------

### Install EasyMDE via npm

Source: https://github.com/ionaru/easy-markdown-editor/blob/master/README.md

Install the EasyMDE package using npm.

```bash
npm install easymde
```

--------------------------------

### Highlight.js Setup for Code Syntax Highlighting

Source: https://github.com/ionaru/easy-markdown-editor/blob/master/README.md

To enable code syntax highlighting, include the highlight.js script and CSS files. This snippet shows the necessary CDN links.

```html
<script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">
```

--------------------------------

### Get EasyMDE editor content

Source: https://github.com/ionaru/easy-markdown-editor/blob/master/README.md

Retrieve the current content of the EasyMDE editor.

```javascript
easyMDE.value();
```

--------------------------------

### Configure EasyMDE Editor Options

Source: https://github.com/ionaru/easy-markdown-editor/blob/master/README.md

This snippet shows a full configuration object for initializing EasyMDE. It includes settings for autosave, input formatting, preview rendering, and toolbar customization. Use this as a reference for setting up the editor with specific behaviors.

```javascript
const editor = new EasyMDE({
    autofocus: true,
    autosave: {
        enabled: true,
        uniqueId: "MyUniqueID",
        delay: 1000,
        submit_delay: 5000,
        timeFormat: {
            locale: 'en-US',
            format: {
                year: 'numeric',
                month: 'long',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
            },
        },
        text: "Autosaved: "
    },
    blockStyles: {
        bold: "__",
        italic: "_",
    },
    unorderedListStyle: "-",
    element: document.getElementById("MyID"),
    forceSync: true,
    hideIcons: ["guide", "heading"],
    indentWithTabs: false,
    initialValue: "Hello world!",
    insertTexts: {
        horizontalRule: ["", "\n\n-----\n\n"],
        image: ["!(http://", ")"],
        link: ["[", "](https://)"],
        table: ["", "\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text     | Text      | Text     |\n\n"],
    },
    lineWrapping: false,
    minHeight: "500px",
    parsingConfig: {
        allowAtxHeaderWithoutSpace: true,
        strikethrough: false,
        underscoresBreakWords: true,
    },
    placeholder: "Type here...",

    previewClass: "my-custom-styling",
    previewClass: ["my-custom-styling", "more-custom-styling"],

    previewRender: (plainText) => customMarkdownParser(plainText), // Returns HTML from a custom parser
    previewRender: (plainText, preview) => { // Async method
        setTimeout(() => {
            preview.innerHTML = customMarkdownParser(plainText);
        }, 250);

        // If you return null, the innerHTML of the preview will not
        // be overwritten. Useful if you control the preview node's content via
        // vdom diffing.
        // return null;

        return "Loading...";
    },
    promptURLs: true,
    promptTexts: {
        image: "Custom prompt for URL:",
        link: "Custom prompt for URL:",
    },
    renderingConfig: {
        singleLineBreaks: false,
        codeSyntaxHighlighting: true,
        sanitizerFunction: (renderedHTML) => {
            // Using DOMPurify and only allowing <b> tags
            return DOMPurify.sanitize(renderedHTML, {ALLOWED_TAGS: ['b']})
        },
    },
    shortcuts: {
        drawTable: "Cmd-Alt-T"
    },
    showIcons: ["code", "table"],
    spellChecker: false,
    status: false,
    status: ["autosave", "lines", "words", "cursor"], // Optional usage
    status: ["autosave", "lines", "words", "cursor", {
        className: "keystrokes",
        defaultValue: (el) => {
            el.setAttribute('data-keystrokes', 0);
        },
        onUpdate: (el) => {
            const keystrokes = Number(el.getAttribute('data-keystrokes')) + 1;
            el.innerHTML = `${keystrokes} Keystrokes`;
            el.setAttribute('data-keystrokes', keystrokes);
        },
    }], // Another optional usage, with a custom status bar item that counts keystrokes
    styleSelectedText: false,
    sideBySideFullscreen: false,
    syncSideBySidePreviewScroll: false,
    tabSize: 4,
    toolbar: false,
    toolbarTips: false,
    toolbarButtonClassPrefix: "mde",
});

```

--------------------------------

### Run Tests

Source: https://github.com/ionaru/easy-markdown-editor/blob/master/CONTRIBUTING.md

Ensure your code changes comply with project standards and that all tests pass before committing.

```bash
npm run test
```

--------------------------------

### Clone Your Forked Repository

Source: https://github.com/ionaru/easy-markdown-editor/blob/master/CONTRIBUTING.md

Clone your forked copy of the EasyMDE project to your local machine.

```bash
git clone https://github.com/YOUR_USERNAME/easy-markdown-editor.git
```

--------------------------------

### Include EasyMDE via UNPKG CDN

Source: https://github.com/ionaru/easy-markdown-editor/blob/master/README.md

Include EasyMDE's CSS and JavaScript files using the UNPKG CDN.

```html
<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
```

--------------------------------

### Include EasyMDE via jsDelivr CDN

Source: https://github.com/ionaru/easy-markdown-editor/blob/master/README.md

Include EasyMDE's CSS and JavaScript files using the jsDelivr CDN.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
```

--------------------------------

### Load EasyMDE on the first textarea

Source: https://github.com/ionaru/easy-markdown-editor/blob/master/README.md

Initialize EasyMDE on the first textarea element found on the page.

```html
<textarea></textarea>
<script>
const easyMDE = new EasyMDE();
</script>
```

--------------------------------

### Initialize EasyMDE with Custom Options

Source: https://github.com/ionaru/easy-markdown-editor/blob/master/cypress/e2e/3-class-prefix/index.html

Initializes EasyMDE with a custom toolbar button class prefix and specifies which icons to show. Use this to customize the editor's appearance and available toolbar buttons.

```javascript
const easyMDE = new EasyMDE({ toolbarButtonClassPrefix: 'mde', showIcons: ["table"], });
```

--------------------------------

### Create Toolbar Dropdown Menus

Source: https://github.com/ionaru/easy-markdown-editor/blob/master/README.md

Organize toolbar buttons into dropdown menus by defining a 'children' array for a button. This is useful for grouping related actions.

```javascript
const easyMDE = new EasyMDE({
    toolbar: [{
                name: "heading",
                action: EasyMDE.toggleHeadingSmaller,
                className: "fa fa-header",
                title: "Headers",
            },
            "|",
            {
                name: "others",
                className: "fa fa-blind",
                title: "others buttons",
                children: [
                    {
                        name: "image",
                        action: EasyMDE.drawImage,
                        className: "fa fa-picture-o",
                        title: "Image",
                    },
                    {
                        name: "quote",
                        action: EasyMDE.toggleBlockquote,
                        className: "fa fa-percent",
                        title: "Quote",
                    },
                    {
                        name: "link",
                        action: EasyMDE.drawLink,
                        className: "fa fa-link",
                        title: "Link",
                    }
                ]
            },
        // [, ...]
    ]
});
```

--------------------------------

### Initialize EasyMDE with sideBySideFullscreen disabled

Source: https://github.com/ionaru/easy-markdown-editor/blob/master/example/index_sideBySideFullscreenFalse.html

Use this configuration when you want to prevent the side-by-side view from entering fullscreen mode. This is the default behavior.

```javascript
const easyMDE = new EasyMDE({sideBySideFullscreen: false});
```

--------------------------------

### Check Editor State Methods

Source: https://github.com/ionaru/easy-markdown-editor/blob/master/README.md

Utility methods to determine the current active state of the editor, such as preview, side-by-side, or fullscreen mode.

```javascript
const easyMDE = new EasyMDE();
easyMDE.isPreviewActive(); // returns boolean
easyMDE.isSideBySideActive(); // returns boolean
easyMDE.isFullscreenActive(); // returns boolean
```

--------------------------------

### Checkout Master Branch

Source: https://github.com/ionaru/easy-markdown-editor/blob/master/CONTRIBUTING.md

Switch back to the master branch to prepare for fetching new upstream changes.

```bash
git checkout master
```

--------------------------------

### Configure Header Prefix with Marked Options

Source: https://github.com/ionaru/easy-markdown-editor/blob/master/cypress/e2e/5-marked-options/index.html

Set a custom prefix for generated header IDs when initializing EasyMDE. This is useful for ensuring unique and predictable header links.

```javascript
const easyMDE = new EasyMDE({ renderingConfig: { markedOptions: { headerPrefix: 'header-prefix-', } } });
```

--------------------------------

### Push Changes to GitHub

Source: https://github.com/ionaru/easy-markdown-editor/blob/master/CONTRIBUTING.md

Push your committed changes to your forked repository on GitHub.

```bash
git push origin
```

--------------------------------

### Configure Keyboard Shortcuts

Source: https://github.com/ionaru/easy-markdown-editor/blob/master/README.md

Customize default keyboard shortcuts or unbind them. Shortcuts are automatically converted between platforms (Windows/Linux and macOS).

```javascript
const editor = new EasyMDE({
    shortcuts: {
        "toggleOrderedList": "Ctrl-Alt-K", // alter the shortcut for toggleOrderedList
        "toggleCodeBlock": null, // unbind Ctrl-Alt-C
        "drawTable": "Cmd-Alt-T", // bind Cmd-Alt-T to drawTable action, which doesn't come with a default shortcut
    }
});
```

--------------------------------

### Fetch Upstream Changes

Source: https://github.com/ionaru/easy-markdown-editor/blob/master/CONTRIBUTING.md

Fetch the latest changes from the upstream repository to ensure your local copy is up-to-date.

```bash
git fetch upstream
```

--------------------------------

### Create a New Feature Branch

Source: https://github.com/ionaru/easy-markdown-editor/blob/master/CONTRIBUTING.md

Create a new branch for your feature or bug fix to keep your work isolated.

```bash
git checkout -b MyNewFeatureName
```

--------------------------------

### Customize Toolbar Order

Source: https://github.com/ionaru/easy-markdown-editor/blob/master/README.md

Reorder existing toolbar buttons by providing an array of button names to the 'toolbar' option.

```javascript
const easyMDE = new EasyMDE({
    toolbar: ["bold", "italic", "heading", "|", "quote"]
});
```

--------------------------------

### Set EasyMDE editor content

Source: https://github.com/ionaru/easy-markdown-editor/blob/master/README.md

Set new content for the EasyMDE editor.

```javascript
easyMDE.value('New input for **EasyMDE**');
```

--------------------------------

### Load EasyMDE on a specific textarea

Source: https://github.com/ionaru/easy-markdown-editor/blob/master/README.md

Initialize EasyMDE on a specific textarea element identified by its ID.

```html
<textarea id="my-text-area"></textarea>
<script>
const easyMDE = new EasyMDE({element: document.getElementById('my-text-area')});
</script>
```

--------------------------------

### Add Upstream Remote for Updates

Source: https://github.com/ionaru/easy-markdown-editor/blob/master/CONTRIBUTING.md

Add the original EasyMDE repository as a remote named 'upstream' to keep your fork synchronized with the main project.

```bash
git remote add upstream https://github.com/Ionaru/easy-markdown-editor.git
```

--------------------------------

### Handle Editor Change Event

Source: https://github.com/ionaru/easy-markdown-editor/blob/master/README.md

Listen for changes in the editor content and log the current value. This snippet demonstrates basic event handling using CodeMirror's event system.

```javascript
const easyMDE = new EasyMDE();
easyMDE.codemirror.on("change", () => {
    console.log(easyMDE.value());
});
```

--------------------------------

### Add Custom Toolbar Buttons

Source: https://github.com/ionaru/easy-markdown-editor/blob/master/README.md

Add custom buttons to the toolbar with specific actions, classes, and attributes. You can also use pre-made buttons by referencing their names.

```javascript
const easyMDE = new EasyMDE({
    toolbar: [
        {
            name: "bold",
            action: EasyMDE.toggleBold,
            className: "fa fa-bold",
            title: "Bold",
        },
        "italic", // shortcut to pre-made button
        {
            name: "custom",
            action: (editor) => {
                // Add your own code
            },
            className: "fa fa-star",
            text: "Starred",
            title: "Custom Button",
            attributes: { // for custom attributes
                id: "custom-id",
                "data-value": "custom value" // HTML5 data-* attributes need to be enclosed in quotation marks ("" because of the dash (-) in its name.
            }
        },
        "|" // Separator
        // [, ...]
    ]
});
```

--------------------------------

### Merge Upstream Changes into Master

Source: https://github.com/ionaru/easy-markdown-editor/blob/master/CONTRIBUTING.md

Update your local master branch with the latest changes from the upstream repository.

```bash
git merge upstream/master
```

--------------------------------

### Remove EasyMDE Instance

Source: https://github.com/ionaru/easy-markdown-editor/blob/master/README.md

Revert the editor to its original text area state. This action also clears any associated autosave data.

```javascript
const easyMDE = new EasyMDE();
// ...
easyMDE.toTextArea();
easyMDE = null;
```

--------------------------------

### Cleanup Event Listeners

Source: https://github.com/ionaru/easy-markdown-editor/blob/master/README.md

Manually remove registered event listeners when the EasyMDE instance is no longer needed.

```javascript
const easyMDE = new EasyMDE();
easyMDE.cleanup();
```

--------------------------------

### Clear Autosaved Value

Source: https://github.com/ionaru/easy-markdown-editor/blob/master/README.md

Removes any previously saved autosave data associated with the editor instance.

```javascript
const easyMDE = new EasyMDE();
easyMDE.clearAutosavedValue(); // no returned value
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.