-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
189 lines (148 loc) · 14.5 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
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Alex Dainiak">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Learn the crucial LaTeX basics interactively for free in an hour with bite-sized exercises. A hands-on introduction to LaTeX and MathJax mathematical notation. Exercise-based practice with instant previews. Symbol search.">
<meta name="keywords" content="LaTeX tutorial, MathJax, KaTeX, mathematical notation, LaTeX online, interactive LaTeX, learn LaTeX, math typesetting, LaTeX primer">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://www.ilatexprimer.com">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css" integrity="sha512-rt/SrQ4UNIaGfDyEXZtNcyWvQeOq0QLygHluFQcSjaGB04IxWhal71tKuzP6K8eYXYB6vJV4pHkXcmFGGQ1/0w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/darktheme.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css">
<link rel="stylesheet" href="css/ilatexprimer.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.bundle.min.js" integrity="sha512-igl8WEUuas9k5dtnhKqyyld6TzzRjvMqLC79jkgT3z02FvJyHAuUtyemm/P/jYSne1xwFI06ezQxEwweaiV7VA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js" integrity="sha512-qOBWNAMfkz+vXXgbh0Wz7qYSLZp6c14R0bZeVX2TdQxWpuKr6yHjBIM69fcF8Ve4GUX6B6AKRQJqiiAmwvmUmQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.36.3/ace.min.js" integrity="sha512-faieT+YRcxd+aQZbK6m2iaKhYEKkDvwbn7n2WToge2+k6+YBlxbT/Wii5bVPUWpnXm186SPynzVfc+ME8a/a3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.36.3/ext-static_highlight.min.js" integrity="sha512-kzKJmeEmcmuGJMAvtXoK0FNPnyrkrOIyASmEg2yNUXron9qC/Cf5rTQgTSTLr80esrTaGidX7K1iFNNG3LSaVA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js" integrity="sha256-5r/l3uvUx8zScgVbq2O9OrLHO5B7bmoi01J0CoE4H9Q=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/copy-tex.min.js" integrity="sha256-B3cK+QlDod4aEBB5S8eManNG1G1I+2PjXMdrp2uCdgQ=" crossOrigin="anonymous"></script>
<script type="text/javascript" src="js/mathjax-config.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-chtml-full.min.js" integrity="sha512-PbLRl9V4qEM7j3xggKupLNdcodHT0w+x77S/JoTWxrhPEVZ0NkTPp90bzUeTyFXsBzsaApVOZdCHIzL6o51KiA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript" src="js/i18n.js"></script>
<script type="text/javascript" charset="utf-8" src="js/ilatexprimer.js"></script>
<title>Interactive Introduction to LaTeX on the Web</title>
</head>
<body>
<div class="container">
<div class="alert alert-info font-weight-bold" role="alert" id="loadingToast"><div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><span id="loadingToastText">Loading…</span></div>
<div class="card mt-3">
<div class="form-group">
<div class="custom-control" style="display: inline"><img class="language-flag" data-language="en" src="img/en.svg" alt="english"><img class="language-flag" data-language="ru" src="img/ru.svg" alt="russian"></div>
<div class="custom-control custom-switch dark-switch-container">
<input type="checkbox" class="custom-control-input" id="darkSwitch">
<label class="custom-control-label" for="darkSwitch"><i class="fa-regular fa-moon" aria-hidden="true"></i></label>
</div>
</div>
<div class="social-share">
<div class="btn-group">
<a class="btn btn-outline-secondary" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.ilatexprimer.com"><i class="fa-brands fa-facebook"></i></a>
<a class="btn btn-outline-secondary" href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.ilatexprimer.com&title=Interactive%20LaTeX%20Primer"><i class="fa-brands fa-linkedin"></i></a>
<a class="btn btn-outline-secondary" href="https://twitter.com/home?status=https%3A%2F%2Fwww.ilatexprimer.com"><i class="fa-brands fa-x-twitter"></i></a>
<a class="btn btn-outline-secondary" href="https://vk.com/share.php?url=https%3A%2F%2Fwww.ilatexprimer.com"><i class="fa-brands fa-vk"></i></a>
</div>
<div class="ribbon-container">
<div class="ribbon"><a href="https://github.com/dainiak/ilatexprimer" id="githubForkLink">Fork me on GitHub</a></div>
</div>
</div>
<div class="card-body">
<h1 class="card-title" id="mainTitle">Interactive Introduction to \( \LaTeX \)</h1>
<div class="form-group">
<form id="searchForm" class="form-inline" role="search" action="">
<div data-tg-tour="Here is a search" class="input-group"><label for="searchInput"></label><input type="text" id="searchInput" class="form-control" autocomplete="off">
<div class="input-group-append"><button class="btn btn-outline-secondary" type="submit"><i class="fa-solid fa-magnifying-glass"></i></button></div></div>
</form>
</div>
<div class="form-group">
<h5 class="card-title" style="display: none;" id="collapseExpandSteps">Collapse/expand all steps</h5>
<div class="card-text"><div class="btn-group">
<button id="btnCollapseAll" class="btn btn-outline-secondary">Collapse all steps</button>
<button id="btnExpandAll" class="btn btn-outline-secondary">Expand all steps</button>
</div></div>
</div>
<h5 class="card-title manual-collapse collapsed" data-toggle="collapse" data-target="#contentAbout" id="headerAbout"><a href="#">About</a></h5>
<div class="card-text card-text collapse manual-collapse" id="contentAbout"><p>This interactive lesson is created by <a rel="author" href="https://www.dainiak.com">Alex Dainiak</a>. Email: <code>dainiak@gmail.com</code></p><p>The lesson is powered by <a href="https://www.mathjax.org/">MathJax</a>, <a href="https://khan.github.io/KaTeX/">KaTeX</a>, <a href="https://ace.c9.io">ACE Editor</a>, <a href="https://getbootstrap.com/">Bootstrap</a>, <a href="https://jquery.com/">jQuery</a>. While preparing this lesson, the author benefited much from <a href="https://stackoverflow.com/">Stack Overflow</a> and <a href="https://tex.stackexchange.com/">LaTeX Stack Exchange</a>. Programming this lesson was made fun by <a href="https://www.jetbrains.com/pycharm/">PyCharm</a> IDE and <a href="https://www.google.com/chrome/">Chrome</a> developer tools. This project is hosted on <a href="https://github.com/dainiak/ilatexprimer">GitHub</a>.</p></div>
<h5 class="card-title manual-collapse" data-toggle="collapse" data-target="#tableofcontents" id="headerTOC"><a href="#">Table of Contents</a></h5>
<div class="card-text card-text collapse manual-collapse" id="tableofcontents"></div>
</div>
</div>
<div class="card">
<div class="card-header h3 manual-collapse collapsed" data-toggle="collapse" data-target="#optionsPanel"><h4 class="h4" id="headerOptions">Settings</h4></div>
<div id="optionsPanel" class="card-body card-text collapse manual-collapse">
<div class="form-group">
<div class="card-text"><div class="btn-group">
<button id="btnResetLocalStorage" class="btn btn-outline-secondary">Reset progress and settings</button>
</div></div>
</div>
<div class="form-group">
<h5 class="card-title" id="headerTheme">Theme</h5>
<div class="card-text">
<div class="form-check"><label class="form-check-label"><input class="form-check-input" type="radio" name="theme" value="light" checked> <span id="optionThemeLight">light</span></label></div>
<div class="form-check"><label class="form-check-label"><input class="form-check-input" type="radio" name="theme" value="dark"> <span id="optionThemeDark">dark</span></label></div>
</div>
</div>
<div class="form-group">
<h5 class="card-title" id="headerDisplayLanguage">Language</h5>
<div class="card-text">
<div class="form-check"><label class="form-check-label"><input class="form-check-input" type="radio" name="displayLanguage" value="ru"> <span id="optionLanguageRU">русский</span></label></div>
<div class="form-check"><label class="form-check-label"><input class="form-check-input" type="radio" name="displayLanguage" value="en" checked> <span id="optionLanguageEN">english</span></label></div>
</div>
</div>
<div class="form-group">
<h5 class="card-title" id="headerMathEngine">Math display engine</h5>
<div class="card-text">
<div class="form-check"><label class="form-check-label"><input class="form-check-input" type="radio" name="mathRenderer" value="MathJax"> <span id="optionMathEngineMathJax">MathJax (not that fast, but better compatibility)</span></label></div>
<div class="form-check"><label class="form-check-label"><input class="form-check-input" type="radio" name="mathRenderer" value="KaTeX" checked> <span id="optionMathEngineKaTeX">KaTeX (very fast, but supports smaller LaTeX command set)</span></label></div>
</div>
</div>
<div class="form-group">
<h5 class="card-title" id="headerInteractivityMode">When to process the LaTeX source code</h5>
<div class="card-text">
<div class="form-check"><label class="form-check-label"><input class="form-check-input" type="radio" name="typesetOnChange" value="true" checked> <span id="optionInteractivityHigh">On any update of the source code (more fun)</span></label></div>
<div class="form-check"><label class="form-check-label"><input class="form-check-input" type="radio" name="typesetOnChange" value="false"> <span id="optionInteractivityLow">Only when <code>Ctrl+Enter</code> is pressed in the source code editor (more stable)</span></label></div>
</div>
</div>
<div class="form-group">
<h5 class="card-title" id="headerEditorInstances">Number of source code editor instances</h5>
<div class="form-check"><label class="form-check-label"><input class="form-check-input" type="radio" name="singleAceInstance" value="false" checked> <span id="optionEditorMultiple">Separate editor per each step (more convenient)</span></label></div>
<div class="form-check"><label class="form-check-label"><input class="form-check-input" type="radio" name="singleAceInstance" value="true"> <span id="optionEditorSingle">Single editor instance (lower memory load)</span></label></div>
</div>
<div class="form-group">
<h5 class="card-title" id="headerSourceResultRatio"></h5>
<div class="form-check form-check-inline"><label class="form-check-label"><input class="form-check-input" type="radio" name="areaWidthRatio" value="8"> 1:2</label></div>
<div class="form-check form-check-inline"><label class="form-check-label"><input class="form-check-input" type="radio" name="areaWidthRatio" value="7"> 5:7</label></div>
<div class="form-check form-check-inline"><label class="form-check-label"><input class="form-check-input" type="radio" name="areaWidthRatio" value="6"> 1:1</label></div>
<div class="form-check form-check-inline"><label class="form-check-label"><input class="form-check-input" type="radio" name="areaWidthRatio" value="5" checked> 7:5</label></div>
<div class="form-check form-check-inline"><label class="form-check-label"><input class="form-check-input" type="radio" name="areaWidthRatio" value="4"> 2:1</label></div>
<div class="form-check form-check-inline"><label class="form-check-label"><input class="form-check-input" type="radio" name="areaWidthRatio" value="0"> <span id="optionNoSourceCode">no source code</span></label></div>
</div>
</div>
</div>
<section class="main-content" lang="en">
<script type="text/latexlesson" data-src="intro.tex"></script>
<h2 class="h2 mt-4">What is $\LaTeX$?</h2>
<script type="text/latexlesson" data-src="text-basics.tex"></script>
<h2 class="h2 mt-4">Basic formulas</h2>
<script type="text/latexlesson" data-src="formulae-basics.tex"></script>
<h2 class="h2 mt-4">Display-style formulas and amsmath environments</h2>
<script type="text/latexlesson" data-src="formulae-advanced.tex"></script>
<h2 class="h2 mt-4">Where to look next</h2>
<script type="text/latexlesson" data-src="what-next.tex"></script>
</section>
<section class="main-content" lang="ru">
<script type="text/latexlesson" data-src="intro.tex"></script>
<h2 class="h2 mt-4">Что такое $\LaTeX$?</h2>
<script type="text/latexlesson" data-src="text-basics.tex"></script>
<h2 class="h2 mt-4">Как набирать формулы?</h2>
<script type="text/latexlesson" data-src="formulae-basics.tex"></script>
<h2 class="h2 mt-4">Формулы: набор выключных формул и окружения amsmath</h2>
<script type="text/latexlesson" data-src="formulae-advanced.tex"></script>
<h2 class="h2 mt-4">Что дальше?</h2>
<script type="text/latexlesson" data-src="what-next.tex"></script>
</section>
</div>
<button type="button" class="btn btn-outline-secondary" id="scrollToTop"><i class="fa-solid fa-angles-up"></i></button>
</body></html>