-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
170 lines (165 loc) · 9.11 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
<meta name="title" content="CodeCake">
<meta name="description" content="A tiny code editor for the web">
<meta property="og:site_name" content="CodeCake">
<meta property="og:title" content="CodeCake">
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.josemi.xyz/codecake" />
<meta property="og:image" content="https://www.josemi.xyz/codecake/header.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="CodeCake" />
<meta property="description" content="A tiny code editor for the web." />
<title>CodeCake: tiny code editor for the web</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@700&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:wght@400;500;700&display=swap">
<link rel="stylesheet" href="./node_modules/lowcss/dist/low.css">
<link rel="stylesheet" href="./codecake.css">
</head>
<body class="m-0 font-lato text-base leading-normal text-gray-900">
<!-- Editor example -->
<div class="main w-full max-w-4xl mx-auto px-6">
<!-- Header section -->
<div class="w-full mt-4 md:mt-12 mb-6">
<div class="flex justify-between items-center w-full">
<div class="text-xl md:text-2xl font-bold font-plex-serif tracking-tight select-none">
<a href="./" class="text-gray-950">CodeCake</a>
</div>
<div class="flex gap-4">
<a href="./demo.html" class="font-medium text-gray-900 hover:text-gray-800 hover:underline">Demo</a>
<a href="https://github.com/jmjuanes/codecake#api" class="font-medium text-gray-900 hover:text-gray-800 hover:underline">API</a>
<a href="https://github.com/jmjuanes/codecake" class="font-medium text-gray-900 hover:text-gray-800 hover:underline">GitHub</a>
</div>
</div>
</div>
<!-- Hero section -->
<div class="mb-6 w-full pt-16 pb-10">
<div class="text-6xl font-bold font-plex-serif tracking-tight mb-3">
<strong>Tiny Code Editor for web.</strong>
</div>
<div class="text-lg text-gray-800">
<b>CodeCake</b> is a tiny and lightweight code editor for web applications, crafted with elegance in <u>under 200 lines of code</u>.
It can be easily integrated into any web application for efficient and hassle-free code editing,
</div>
</div>
<!-- Example section-->
<div class="">
<div class="text-sm text-gray-700 mb-2 text-center">Try it out:</div>
<div id="editor" class="shadow-lg rounded-md overflow-hidden"></div>
</div>
<!-- Features section -->
<div class="w-full pt-20">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-8 w-full">
<div class="w-full">
<div class="font-bold text-2xl mb-3">Tiny and Minimal</div>
<div class=""><b>CodeCake</b> boasts a minimal codebase, with less than 200 lines of code, making it easy to understand, customize, and integrate into your projects.</div>
</div>
<div class="w-full">
<div class="font-bold text-2xl mb-3">Lightweight Syntax Highlighting</div>
<div class="">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.</div>
</div>
<div class="w-full">
<div class="font-bold text-2xl mb-3">Easy Integration</div>
<div class="">Seamlessly integrate <b>CodeCake</b> into your web applications with minimal setup.</div>
</div>
<div class="w-full">
<div class="font-bold text-2xl mb-3">Open Source</div>
<div class=""><b>CodeCake</b> is an open-source project, allowing you to contribute, modify, and use it freely under the MIT license.</div>
</div>
</div>
</div>
<!-- Usage -->
<div class="w-full pt-20">
<div class="text-4xl font-bold font-plex-serif tracking-tight mb-4">Usage</div>
<div class="mb-4">
<span><b>CodeCake</b> is designed for easy integration into your web applications. </span>
<span>You can include it in your project using one of the following methods. </span>
</div>
<div class="text-2xl font-bold font-plex-serif tracking-tight mb-4 mt-8">From a package manager</div>
<div class="mb-4">
<span>You can add <b>CodeCake</b> to your project using a package manager like NPM or Yarn:</span>
</div>
<div class="mb-4">
<pre data-language="bash">## Install using npm:<br>$ npm install --save codecake<br><br>## Install using yarn:<br>$ yarn add codecake</pre>
</div>
<div class="mb-4">
<span>Then, import <b>CodeCake</b> into your project and initialize the editor:</span>
</div>
<div class="mb-4">
<pre data-language="javascript">// 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
});</pre>
</div>
<div class="text-2xl font-bold font-plex-serif tracking-tight mb-4 mt-8">From a CDN</div>
<div class="mb-4">
<span>If you prefer a quick and simple way to get started without npm, you can use a CDN like <b>unpkg</b> to include <b>CodeCake</b> directly in your HTML file.</span>
</div>
<div class="mb-4">
<span>First, import the CSS styles by adding the following <code class="px-1 font-bold"><link></code> tag to your HTML:</span>
</div>
<div class="mb-4">
<pre data-language="html"><link rel="stylesheet" href="https://unpkg.com/codecake/codecake.css"></pre>
</div>
<div class="mb-4">
<span>Then, add the following code in a <code class="px-1 font-bold"><script type="module"></code> tag:</span>
</div>
<div class="mb-4">
<pre data-language="javascript">import * as CodeCake from "https://unpkg.com/codecake/codecake.js";
const parent = document.getElementById("editor");
const cake = CodeCake.create(parent, {
//... your options
});</pre>
</div>
</div>
<!-- Footer section -->
<div class="pb-16 pt-20 text-sm text-gray-700">
Crafted with love by <a href="https://josemi.xyz" class="font-medium text-gray-900 hover:underline">Josemi</a>.
</div>
</div>
<!-- Editor code -->
<script type="module">
import * as CodeCake from "./codecake.js";
const parent = document.getElementById("editor");
const exampleCode = [
`function sum(a, b) {`,
` return a + b;`,
`};`,
``,
`// Expected: 4`,
`console.log(sum(2, 2));`,
];
// Initialize example editor
CodeCake.create(parent, {
code: exampleCode.join("\n"),
className: "codecake-dark",
lineNumbers: true,
highlight: code => CodeCake.highlight(code, "javascript"),
});
</script>
<!-- highlight examples -->
<script type="module">
import {highlight} from "./codecake.js";
const classList = "codecake-dark text-white p-4 rounded-md shadow-md overflow-x-auto";
Array.from(document.querySelectorAll(`pre[data-language]`)).forEach(el => {
// Highlight the code of the element
const language = el.dataset.language;
if (language === "html" || language === "javascript") {
el.innerHTML = highlight(el.textContent, language);
}
// Add styles to pre element
classList.split(" ").forEach(css => {
el.classList.add(css);
});
});
</script>
</body>
</html>