CodeCake: tiny code editor for the web

CodeCake

Demo API GitHub

Tiny Code Editor for web.

CodeCake is a tiny and lightweight code editor for web applications, crafted with elegance in under 200 lines of code. It can be easily integrated into any web application for efficient and hassle-free code editing,

Try it out:

Tiny and Minimal

CodeCake boasts a minimal codebase, with less than 200 lines of code, making it easy to understand, customize, and integrate into your projects.

Lightweight Syntax Highlighting

Built-in support for common web languages: JavaScript, HTML, CSS, and Markdown. Our syntax highlighter, spanning under 150 lines of code, ensures your code stands out clearly.

Easy Integration

Seamlessly integrate CodeCake into your web applications with minimal setup.

Open Source

CodeCake is an open-source project, allowing you to contribute, modify, and use it freely under the MIT license.

Usage

CodeCake is designed for easy integration into your web applications. You can include it in your project using one of the following methods.

From a package manager

You can add CodeCake to your project using a package manager like NPM or Yarn:

## Install using npm:
$ npm install --save codecake

## Install using yarn:
$ yarn add codecake

Then, import CodeCake into your project and initialize the editor:

// Import the CodeCake CSS
import "codecake/codecake.css";

// Import the editor module
import * as CodeCake from "codecake";

// Initialize the editor
const parent = document.getElementById("editor");
const cake = CodeCake.create(parent, {
    //... your options
});

From a CDN

If you prefer a quick and simple way to get started without npm, you can use a CDN like unpkg to include CodeCake directly in your HTML file.

First, import the CSS styles by adding the following <link> tag to your HTML:

<link rel="stylesheet" href="https://unpkg.com/codecake/codecake.css">

Then, add the following code in a <script type="module"> tag:

import * as CodeCake from "https://unpkg.com/codecake/codecake.js";
const parent = document.getElementById("editor");
const cake = CodeCake.create(parent, {
    //... your options
});

Crafted with love by Josemi.