-
Notifications
You must be signed in to change notification settings - Fork 2
/
documentation.html
145 lines (127 loc) · 6 KB
/
documentation.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Code Editor - Documentation</title>
<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="./src/images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./src/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./src/images/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto Mono', monospace;
background-color: #f4f4f9;
}
.container {
max-width: 1000px;
padding-top: 30px;
}
.header {
margin-bottom: 40px;
}
h1, h2 {
color: #333;
}
.card {
margin-bottom: 30px;
}
.footer {
margin-top: 40px;
text-align: center;
font-size: 0.9rem;
color: #555;
}
.footer a {
color: #28a745;
text-decoration: none;
}
</style>
</head>
<body>
<div class="container">
<div class="header text-center">
<h1>Online Code Editor Documentation</h1>
<p class="lead">Learn how to use the tool and its features effectively</p>
</div>
<!-- Overview Section -->
<div class="card">
<div class="card-header">
<h2>Overview</h2>
</div>
<div class="card-body">
<p>The Online Code Editor is a modern and user-friendly tool that allows you to write and run HTML, CSS, and JavaScript code with live preview.</p>
<p>Key features include:</p>
<ul>
<li>Real-time code execution with live preview</li>
<li>Separate editors for HTML, CSS, and JavaScript</li>
<li>Syntax highlighting and code formatting</li>
<li>Save and load code snippets for later use</li>
</ul>
</div>
</div>
<!-- Features Section -->
<div class="card">
<div class="card-header">
<h2>Features</h2>
</div>
<div class="card-body">
<h3>1. HTML, CSS, and JavaScript Editors</h3>
<p>You can write HTML, CSS, and JavaScript code in separate editors provided in the interface. Each editor is equipped with syntax highlighting for better readability and ease of coding.</p>
<h3>2. Live Preview</h3>
<p>The live preview feature allows you to instantly see the output of your code as you write. The preview updates automatically every time you make changes to the HTML, CSS, or JavaScript editors.</p>
<h3>3. Code Formatting</h3>
<p>The editor provides automatic code formatting as you type, ensuring that your code remains clean and easy to read.</p>
<h3>4. Save and Load Code</h3>
<p>You can save your current code and load it later to continue working. This feature is useful for preserving your progress or sharing code snippets with others.</p>
</div>
</div>
<!-- How to Use Section -->
<div class="card">
<div class="card-header">
<h2>How to Use</h2>
</div>
<div class="card-body">
<h3>1. Writing Code</h3>
<p>To begin writing code, simply type in the HTML, CSS, or JavaScript editor. Each editor supports syntax highlighting to help you write clean and error-free code.</p>
<h3>2. Running Code</h3>
<p>Click the "Run Code" button to see the live preview of your HTML, CSS, and JavaScript code. The preview will automatically update every time you make changes in the editors.</p>
<h3>3. Formatting Code</h3>
<p>The editor automatically formats your code as you type, ensuring that it is well-structured. No manual formatting is necessary.</p>
<h3>4. Saving and Loading Code</h3>
<p>To save your code, click the "Save Code" button. You can later reload your saved code using the "Load Code" button. This is perfect for saving snippets you want to come back to later.</p>
<h3>5. Downloading Code</h3>
<p>If you wish to download your current code, use the "Download Code" button. This will generate a .zip file containing all your code (HTML, CSS, and JavaScript), ready for use on your local system.</p>
</div>
</div>
<!-- Technologies Section -->
<div class="card">
<div class="card-header">
<h2>Technologies Used</h2>
</div>
<div class="card-body">
<ul>
<li><strong>HTML</strong>: Markup language used to structure the web pages.</li>
<li><strong>CSS</strong>: Stylesheet language used for styling the editor and live preview.</li>
<li><strong>JavaScript</strong>: Programming language used to make the editor interactive and dynamic.</li>
<li><strong>CodeMirror</strong>: A JavaScript library used for code editing with syntax highlighting.</li>
<li><strong>Bootstrap</strong>: A front-end framework used for building a responsive and mobile-first interface.</li>
</ul>
</div>
</div>
<!-- Footer -->
<div class="footer">
<p>© 2024 Tholumuzi. <a href="https://tholumuzi.co.za">All rights reserved.</a></p>
</div>
</div>
<!-- Bootstrap JS and dependencies -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>