This repository has been archived by the owner on Nov 5, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
177 lines (167 loc) · 6.64 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
171
172
173
174
175
176
177
---
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Foremark</title>
<link href="https://fonts.googleapis.com/css?family=Overpass+Mono:400,700|Overpass:200i,300,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/main.css">
<meta name="viewport" content="width=900" />
</head>
<body>
<header></header>
<section class="hero">
<h1>Foremark</h1>
<div class="lead">
Write a beautiful, sharable<br /> document using a text editor.
</div>
<ul class="links">
<li>
<a href="#get-started">Get Started</a>
</li>
<li>
<a href="https://github.com/foremark"><i class="github"></i>GitHub</a>
</li>
</ul>
<nav>
<ul>
<li><a href="examples/reference.mf.xhtml">Reference Manual</a></li>
<li><a href="https://github.com/Foremark/Foremark/blob/master/CHANGELOG.md">Changelog</a></li>
<li><a href="https://github.com/Foremark">GitHub</a></li>
</ul>
</nav>
<section class="notice">
Foremark is currently under development — You might find some features incomplete or broken.
</section>
</section>
<section class="overview">
<div>
<p>
<b>Foremark</b> is a technology for writing a plain-text document which renders nicely on <b>a web browser</b>.
</p>
<p>
It does not require <b>a plugin</b>, <b>pre-compilation process</b>, or <b>dedicated viewer software</b>.
</p>
<figure class="window source">
<figcaption>Example.fm.xhtml</figcaption>
<pre> **Hello**
Welcome to _Foremark_!
::: .----------.
::: Write --> | Document | --> Web Browser
::: '----------'</pre>
</figure>
<figure class="window rendered">
<figcaption>Example</figcaption>
<h1>Hello</h1>
<p>
Welcome to <i>Foremark</i>!
</p>
<p>
<img src="assets/images/example_figure.svg" alt="">
</p>
</figure>
</div>
</section>
<section class="motivation">
<h1>Why Use Foremark?</h1>
<ul class="icons">
<li>
<i class="file"></i>
<p>
Being <b>a plain text file</b>, it can be easily edited by any text editor of your choice. It also works very well with <b>most version control systems</b>.
</p>
</li>
<li>
<i class="offline"></i>
<p>
Foremark automatically loads assets from CDN, but if needed, it can fully operate without <b>an internet connection</b>. Use <b>a self-contained bundle</b> (<code>foremark.bundle.js</code>) available <a href="https://unpkg.com/foremark/browser/">here</a>.
</p>
</li>
<li>
<i class="share"></i>
<p>
Created documents can be <b>shared easily</b> as they are <b>self-contained</b>, only need <b>a web browser</b> to display, and adapt to <b>various display devices</b> (e.g., PC, tablet, and paper).
</p>
</li>
<li>
<i class="markdown"></i>
<p>
The syntax is based on <b>Markdown</b> with some extensions and easy to learn and use.
</p>
</li>
</ul>
</section>
<section class="getStarted" id="get-started">
<h1>Get Started</h1>
<p>
<b>Copy</b> the following code, <b>save</b> it as <a href="hello.fm.xhtml" download="hello.fm.xhtml"><code>hello.fm.xhtml</code></a>, and <b>open</b> it with a web browser.
</p>
<pre><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><pre><![CDATA[
<i>**Title**
Welcome to Foremark!
::: .----------.
::: Write --> | Document | --> Web Browser
::: '----------'
# Section
## Subsection
Content</i>
]]></pre> <!-- Foremark footer -->
<script src="https://unpkg.com/foremark/browser/foremark.js" async="async"/></html></pre>
<p class="nextStep">
Next step: <a href="examples/book.mf.xhtml"><s>Book</s></a> <a href="examples/reference.mf.xhtml">Reference Manual</a>
</p>
</section>
<section class="relatedProjects">
<h1>Foremark Is Powered By...</h1>
<ul class="icons">
<li>
<i class="markdown"></i>
<p>
The formatting of Foremark pulls much inspiration from John Gruber’s <b>Markdown</b> while making many intentional changes.
</p>
</li>
<li>
<i class="markdeep"></i>
<p>
Foremark was <b>heavily inspired</b> by Morgan McGuire’s <b><a href="https://casual-effects.com/markdeep/">Markdeep</a></b>. It also includes a portion of Markdeep.
</p>
</li>
<li>
<i class="gear"></i>
<p>
Rendering of <b>an ASCII diagram</b> is performed using a Rust library <b><a href="https://github.com/ivanceras/svgbob">Svgbob</a></b>.
</p>
</li>
<li>
<i class="katex"></i>
<p>
<b>Displaying LaTeX equations</b> was made possible by a JavaScript library <b><a href="https://katex.org">KaTeX</a></b>.
</p>
</li>
<li>
<i class="webpack"></i>
<p>
Foremark is built using <b><a href="https://webpack.js.org">Webpack</a></b>. Its code splitting feature is essential for <b>lazy-loading various components</b>.
</p>
</li>
<li>
<i class="hljs"></i>
<p>
<b>The code highlighting</b> feature is provided by a JavaScript library <b><a href="https://highlightjs.org">Highlight.js</a></b>.
</p>
</li>
</ul>
</section>
<footer>
</footer>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-22347556-13"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-22347556-13');
</script>
</body>
</html>