Table of Contents

1. Introduction
2. Prerequisites
3. Installation
4. Configuration
5. Usage
6. Credits
7. Further Information

1. Introduction

The Teddy Editor is a WYSIWYG (What You See Is What You Get) markdown editor extension for Visual Studio Code (VS Code), forked from zaaack/vscode-markdown-editor, that is seamlessly integrated with Teddy. It enables content editors to manage and build sites, using Teddy, entirely within VS Code.

Back to Top ▲

2. Prerequisites

Please ensure that the following required software services are installed in your environment.

• Teddy - Opinionated open-source content management system (CMS) and static site generator (SSG) that focuses on simplicity and easy content management.
• Visual Studio Code (VS Code) - Source code editor.

Back to Top ▲

3. Installation

Marketplace Installation

To install the Teddy Editor extension via the Visual Studio marketplace (recommended), please follow the instructions below.

1. Open VS Code.
2. Select 'Extensions' from either the left menu, by selecting File > Preferences > Extensions, or by pressing CTRL + SHIFT + X.
3. In the search input box, search for and install 'Teddy Editor'.

The direct link to the extension in the Visual Studio marketplace is as follows: https://marketplace.visualstudio.com/items?itemName=teddyful.teddy-editor

Manual Installation

To manually install the Teddy Editor extension, please follow the instructions below.

1. Visit https://github.com/teddyful/teddy-editor/releases
2. Dowload teddy-editor-${version}.vsix, where ${version} is the latest release version of Teddy Editor.
3. Open VS Code.
4. Select 'Extensions' from either the left menu, by selecting File > Preferences > Extensions, or by pressing CTRL + SHIFT + X.
5. Select the three dots ... besides the 'Extensions' title, and select 'Install from VSIX...'.
6. Navigate to and select the teddy-editor-${version}.vsix file that was downloaded in step 2.

Back to Top ▲

4. Configuration

In order to build sites using Teddy from within VS Code, the Teddy Editor extension must be properly configured.

1. Open VS Code.
2. Select File > Preferences > Settings.
3. Select Extensions > Teddy.
4. Under 'Teddy: Path', enter the absolute path to the local instance of Teddy (required).
5. Under 'Teddy: Site Name', enter the name of the site that you wish to build, for example travelbook (required).
6. Under 'Teddy: Theme Name', enter the name of the theme that you wish to use, for example bear (required).
7. Under 'Teddy: Build Options', enter any build options that you would like to use, for example --minify-css --minify-html --minify-js --skip-post-build-cleanup. Please visit https://teddyful.com/docs/latest/build/ for a full list of available build options.

Back to Top ▲

5. Usage

Markdown Editor

To open the Teddy Editor, simply right-click on any markdown file in the Explorer view in VS Code, and select 'Open with Teddy' from the resultant context menu.

Build

To build the configured site, simply select the button with the Teddy icon found in the toolbar of the Teddy Editor.

Back to Top ▲

6. Credits

Teddy Editor is a fork of the fantastic Markdown Editor VS Code extension created by Zack Young (zaaack) which in turn uses the amazing Vditor in-browser Markdown editor. Please check out both of these wonderful open-source software projects and, if you are able to, consider donating to one or both of them to help support the awesome open-source community.

• Vditor - in-browser Markdown editor.
• Markdown Editor - VS Code extension.

Back to Top ▲

7. Further Information

For further information, please visit teddyful.com.

Back to Top ▲