-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsyntax.html
169 lines (165 loc) · 6.23 KB
/
syntax.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
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:[email protected]&family=Noto+Sans+Mono:[email protected]&display=swap"
rel="stylesheet"
/>
<script
type="module"
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"
></script>
<script type="text/javascript" src="/scripts/common.js"></script>
<link rel="stylesheet" href="/styles/common.css" />
<meta
name="description"
content="From Rino.js 2, its syntax has become based on standard HTML. You will find that it is so easy to learn."
/>
<meta name="og:title" content="Rino.js Syntax" />
<meta
name="og:description"
content="From Rino.js 2, its syntax has become based on standard HTML. You will find that it is so easy to learn."
/>
<meta name="og:site_name" content="Rino.js" />
<meta name="og:url" content="https://rino.opdev1004.com/syntax" />
<meta
name="og:image"
content="https://rino.opdev1004.com/images/rino512.png"
/>
<title>Rino.js Syntax</title>
</head>
<body>
<header>
<div class="header-content-wrapper">
<div>
<div>
<button id="sidebar-toggle" type="button" aria-label="Toggle Sidebar">
<ion-icon name="menu-outline"></ion-icon>
</button>
</div>
<img src="/images/rino32.png" width="32" height="32" alt="logo" />
<a href="/">Rino</a>
</div>
<div id="header-right">
<a href="/why_rino">Why Rino?</a>
<a href="/installation">Install</a>
<a href="/project_structure">Learn</a>
<a href="/donate">Donate</a>
</div>
</div>
</header>
<div class="content-container">
<div class="sidebar-wrapper" id="sidebar-wrapper">
<aside class="sidebar" id="sidebar">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/why_rino">Why Rino.js?</a></li>
<li><a href="/installation">Installation</a></li>
<li><a href="/commands">Commands</a></li>
<li><a href="/project_structure">Project Structure</a></li>
<li><a href="/syntax">Syntax</a></li>
<li><a href="/donate">Donate</a></li>
</ul>
</aside>
</div>
<main>
<div type="text/markdown"><h1>Syntax</h1>
<p>Starting from Rino.js 2, the syntax is based on standard HTML,
making it intuitive and easy to learn.
For example, the component would be like this
(Read <a href="/project_structure">Project Structure</a> for more information):</p>
<pre><code class="language-html"><component @path="/header" @tag="header" />
</code></pre>
<p>In this page, we are going to cover Rino.js syntax that is not covered in the project structure.</p>
<h2>Templating HTML with Javascript / Typescript</h2>
<p>Rino.js supports powerful templating capabilities using JavaScript or TypeScript.
This feature allows dynamic creation of HTML content,
such as integrating npm packages, reading files, or programmatically generating content.</p>
<h3>Key Points:</h3>
<ul>
<li>Use the <code>@type</code> attribute to specify the language (js, javascript, ts, typescript).</li>
<li>Assign the resulting string to the global <code>result</code> variable (no need to declare <code>result</code> explicitly).</li>
<li>All templating code runs in the Node.js VM.</li>
<li>Currently, <code>import/export</code> statements are not supported.</li>
</ul>
<h3>Examples:</h3>
<p>Using JavaScript:</p>
<pre><code class="language-javascript"><script @type="js" type="text/javascript">
result = "<div>Hello, Rino.js!</div>";
</script>
</code></pre>
<p>Using TypeScript:</p>
<pre><code class="language-typescript"><script @type="ts" type="text/typescript">
result = "<div>Hello, Rino.js with TypeScript!</div>";
</script>
</code></pre>
<h2>Markdown</h2>
<p>Rino.js allows embedding Markdown directly within an HTML file.
This complements the option to load Markdown from an external file using the <code>@path</code> attribute.</p>
<h3>Key Points:</h3>
<ul>
<li>Use the <code>@type</code> attribute with values md or markdown.</li>
<li>Escape the closing <code></script></code> tag by adding a backslash <code><\/</code>.</li>
</ul>
<h3>Example:</h3>
<pre><code><script @type="md" type="text/markdown">
# Markdown Title
This is Markdown content inside an HTML file.
</script>
</code></pre>
</div>
</main>
</div>
<footer class="footer">
<div class="footer-container">
<div class="footer-nav">
<h3>Quick Links</h3>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/why_rino">Why Rino.js?</a></li>
<li><a href="/installation">Installation</a></li>
<li><a href="/commands">Commands</a></li>
<li><a href="/project_structure">Project Structure</a></li>
<li><a href="/syntax">Syntax</a></li>
<li><a href="/donate">Donate</a></li>
</ul>
</div>
<div class="footer-nav">
<h3>Language</h3>
<ul>
<li><a href="/">English</a></li>
<li><a href="/ko/">한국어</a></li>
<li><a href="/ja/">日本語</a></li>
</ul>
</div>
<div class="footer-social">
<h3></h3>
<div class="social-icons">
<a href="https://github.com/rinojs" aria-label="GitHub" target="_blank">
<ion-icon name="logo-github"></ion-icon>
</a>
<a href="https://npmjs.com/package/rinojs" aria-label="NPM" target="_blank"><ion-icon name="logo-npm"></ion-icon></i></a>
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>Rino.js is Free, MIT licensed opensource project</p>
<br />
<p>© 2024 Victor Chanil Park (opdev1004)</p>
</div>
</footer>
</body>
</html>