├── dist ├── CNAME ├── robots.txt ├── favicon.png ├── images │ ├── tags.png │ ├── button.png │ ├── TeXpaste.png │ ├── detexify.png │ ├── highlight.png │ ├── keyboard.png │ ├── show-more.png │ ├── view-source.png │ ├── suggest-edits.png │ ├── tags2.svg │ ├── quora.svg │ ├── favicon.svg │ ├── tags.svg │ └── keyboard.svg ├── icons │ ├── favicon.ico │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── mstile-150x150.png │ ├── apple-touch-icon.png │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ ├── browserconfig.xml │ └── safari-pinned-tab.svg └── manifest.json ├── .gitignore ├── .eslintrc.js ├── .babelrc ├── readme.md ├── package.json ├── src ├── script.js ├── template.html └── style.css └── content.txt /dist/CNAME: -------------------------------------------------------------------------------- 1 | math-on-quora.surge.sh 2 | -------------------------------------------------------------------------------- /dist/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Allow: / 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/* 2 | dist/*.html 3 | dist/*.css 4 | dist/*.js 5 | dist/*.map 6 | -------------------------------------------------------------------------------- /dist/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gillescastel/math-on-quora/HEAD/dist/favicon.png -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "extends": "airbnb", 3 | "installedESLint": true 4 | }; 5 | -------------------------------------------------------------------------------- /dist/images/tags.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gillescastel/math-on-quora/HEAD/dist/images/tags.png -------------------------------------------------------------------------------- /dist/icons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gillescastel/math-on-quora/HEAD/dist/icons/favicon.ico -------------------------------------------------------------------------------- /dist/images/button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gillescastel/math-on-quora/HEAD/dist/images/button.png -------------------------------------------------------------------------------- /dist/images/TeXpaste.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gillescastel/math-on-quora/HEAD/dist/images/TeXpaste.png -------------------------------------------------------------------------------- /dist/images/detexify.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gillescastel/math-on-quora/HEAD/dist/images/detexify.png -------------------------------------------------------------------------------- /dist/images/highlight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gillescastel/math-on-quora/HEAD/dist/images/highlight.png -------------------------------------------------------------------------------- /dist/images/keyboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gillescastel/math-on-quora/HEAD/dist/images/keyboard.png -------------------------------------------------------------------------------- /dist/images/show-more.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gillescastel/math-on-quora/HEAD/dist/images/show-more.png -------------------------------------------------------------------------------- /dist/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gillescastel/math-on-quora/HEAD/dist/icons/favicon-16x16.png -------------------------------------------------------------------------------- /dist/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gillescastel/math-on-quora/HEAD/dist/icons/favicon-32x32.png -------------------------------------------------------------------------------- /dist/images/view-source.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gillescastel/math-on-quora/HEAD/dist/images/view-source.png -------------------------------------------------------------------------------- /dist/icons/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gillescastel/math-on-quora/HEAD/dist/icons/mstile-150x150.png -------------------------------------------------------------------------------- /dist/images/suggest-edits.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gillescastel/math-on-quora/HEAD/dist/images/suggest-edits.png -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015-script"], 3 | "ignore": [ 4 | "./src/smooth-scroll.js" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /dist/icons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gillescastel/math-on-quora/HEAD/dist/icons/apple-touch-icon.png -------------------------------------------------------------------------------- /dist/icons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gillescastel/math-on-quora/HEAD/dist/icons/android-chrome-192x192.png -------------------------------------------------------------------------------- /dist/icons/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gillescastel/math-on-quora/HEAD/dist/icons/android-chrome-512x512.png -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # A short guide to using LaTeX on Quora 2 | 3 | Seeing a lot of people struggling with typesetting math on Quora, I decided to write a short guide to help: [https://math-on-quora.surge.sh](math-on-quora.surge.sh). 4 | -------------------------------------------------------------------------------- /dist/icons/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #b92b27 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /dist/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Math on Quora", 3 | "icons": [ 4 | { 5 | "src": ".\/icons\/android-chrome-192x192.png", 6 | "sizes": "192x192", 7 | "type": "image\/png" 8 | }, 9 | { 10 | "src": ".\/icons\/android-chrome-512x512.png", 11 | "sizes": "512x512", 12 | "type": "image\/png" 13 | } 14 | ], 15 | "theme_color": "#b92b27", 16 | "homepage_url": "https://math-on-quora.surge.sh", 17 | "start_url": "/index.html", 18 | "display": "standalone", 19 | "orientation": "portrait" 20 | } 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quora-math-guide", 3 | "version": "1.0.0", 4 | "description": "Short MathJax guide for Quora", 5 | "scripts": { 6 | "build": "npm run build:html && npm run build:js && npm run build:css", 7 | "build:html": "node ./build-html.js", 8 | "build:css": "postcss --use autoprefixer --use cssnano ./src/*.css -d ./dist/", 9 | "build:js": "babel ./src/script.js --out-file ./dist/bundle.js --source-maps", 10 | "watch": "nodemon -e js,css,html -w ./src -w content.txt -w build-html.js --exec 'npm run build'", 11 | "dev": "npm run watch", 12 | "prod": "npm run build && rm -f ./dist/*.map && uglifyjs --compress -o ./dist/bundle.js -- ./dist/bundle.js && cd ./dist && surge" 13 | }, 14 | "author": "Gilles Castel", 15 | "license": "MIT", 16 | "devDependencies": { 17 | "autoprefixer": "^6.7.7", 18 | "babel-cli": "^6.26.0", 19 | "babel-core": "^6.26.3", 20 | "babel-preset-es2015-script": "^1.1.0", 21 | "cssnano": "^4.1.10", 22 | "eslint": "^5.6.0", 23 | "nodemon": "^1.18.4", 24 | "postcss": "^6.0.23", 25 | "postcss-cli": "^2.6.0", 26 | "uglify-js": "^2.8.29", 27 | "uglifyjs": "^2.4.11", 28 | "braces": "^2.3.1", 29 | "event-stream": "^4.0.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/script.js: -------------------------------------------------------------------------------- 1 | /* global MathJax */ 2 | 3 | [...document.querySelectorAll('.example')].forEach(function(ex, i) { 4 | const code = ex.querySelector('pre'); 5 | 6 | if (i == 0) { 7 | code.classList.add('first'); 8 | code.onfocus = function() { 9 | this.classList.add('first-focus'); 10 | }; 11 | } 12 | 13 | const result = ex.querySelector('.result'); 14 | 15 | // remove tags from pasted content 16 | code.addEventListener('paste', function(e) { 17 | e.preventDefault(); 18 | const text = e.clipboardData.getData('text/plain'); 19 | document.execCommand('insertHTML', false, text); 20 | }); 21 | 22 | code.oninput = function() { 23 | result.innerHTML = `[math]${this.textContent}[/math]`; 24 | MathJax.Hub.Queue(['Typeset', MathJax.Hub, result]); 25 | }; 26 | }); 27 | 28 | MathJax.Hub.Queue(['Typeset', MathJax.Hub]); 29 | 30 | const items = [...document.querySelectorAll('#toc a')].map(function(anchor) { 31 | return { 32 | anchor, 33 | target: document.getElementById(anchor.getAttribute('href').slice(1)) 34 | }; 35 | }); 36 | 37 | function debounce(fn, delay) { 38 | let timer = null; 39 | return function() { 40 | clearTimeout(timer); 41 | timer = setTimeout(function() { 42 | fn(); 43 | }, delay); 44 | }; 45 | } 46 | 47 | function sync() { 48 | items.forEach(function(item) { 49 | const bounds = item.target.getBoundingClientRect(); 50 | const height = window.innerHeight; 51 | if (bounds.top <= height / 2 && bounds.bottom >= height / 2) { 52 | item.anchor.classList.add('active'); 53 | } else { 54 | item.anchor.classList.remove('active'); 55 | } 56 | }); 57 | } 58 | 59 | let supportsPassive = false; 60 | try { 61 | var opts = Object.defineProperty({}, 'passive', { 62 | get: function() { 63 | supportsPassive = true; 64 | } 65 | }); 66 | window.addEventListener('test', null, opts); 67 | } catch (e) {} 68 | 69 | document.addEventListener( 70 | 'scroll', 71 | debounce(sync, 40), 72 | supportsPassive ? {passive: true} : false 73 | ); 74 | 75 | sync(); 76 | 77 | const toc = document.getElementById('toc'); 78 | document.getElementById('toc-toggle').onclick = function() { 79 | toc.classList.toggle('active'); 80 | }; 81 | 82 | document.querySelectorAll('#toc a').forEach(function(a) { 83 | a.onclick = function() { 84 | toc.classList.remove('active'); 85 | }; 86 | }); 87 | -------------------------------------------------------------------------------- /dist/images/tags2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 22 | 24 | 44 | 46 | 47 | 49 | image/svg+xml 50 | 52 | 53 | 54 | 55 | 56 | 61 | [math] e = mc^2 [/math] 72 | 73 | 74 | -------------------------------------------------------------------------------- /dist/icons/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013 9 | 10 | 12 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /dist/images/quora.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Imported Layers 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /dist/images/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 22 | 47 | 49 | 51 | 52 | 54 | image/svg+xml 55 | 57 | 58 | 59 | 60 | 61 | 66 | 70 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /dist/images/tags.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 22 | 24 | 49 | 51 | 52 | 54 | image/svg+xml 55 | 57 | 58 | 59 | 60 | 61 | 66 | 69 | 77 | e = mc^2 89 | 92 | 95 | 101 | 107 | 108 | 112 | 118 | 124 | 125 | 126 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /src/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | An introduction to beautiful math on Quora 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 |
Beautiful math on Quora 34 |
[math]\LaTeX[/math] in less than 10 minutes
35 |
36 |
37 | {{toc}} 38 |
39 |
40 |
41 |

Introduction

42 |
43 |
44 |
To enter math mode, click on show more …
45 | Click on the three dots in the edit bar 46 |
47 | 48 |
49 |
… then click on the sigma button
50 | Click on the Sigma button 51 |
52 |
53 |
Press Σ again to end math mode
54 | Closing math mode 55 |
56 |
57 |
Keyboard shortcuts are often easier to use
58 | Cmd + Shift + L or Ctrl + Shift + L 59 |
60 |
61 |
For question titles, you can use [math] and [/math]
62 | Surround your math with `[math]` and `[/math]` (without the quotes) 63 |
64 |
65 |
Click on ‘Suggest Edits’ to see others’ [math]\LaTeX[/math] code
66 | Click on the three dots on the right of an answer, then click on suggest edits 67 |
68 |
69 |
De[math]\TeX[/math]ify helps you with finding the name of a symbol
70 | Draw the symbol you want, and DeTeXify find the name for you 71 |
72 |
73 |
Code editors like [math]\TeX[/math]paste can speed up your work
74 | Code editors come with buttons that will insert special characters 75 |
76 |
77 |
78 | {{content}} 79 | 98 | 99 | 100 | 129 | 130 | 139 | 140 | 141 | -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | font-size:18px; 3 | background:#fafafa; 4 | margin:0; 5 | padding:0; 6 | font-family: 'Roboto', sans-serif 7 | } 8 | 9 | 10 | body > header { 11 | font-size: 60px; 12 | font-family: "Libre Baskerville"; 13 | color: #333; 14 | background:whitesmoke; 15 | } 16 | 17 | body > header .subtitle { 18 | font-style: italic; 19 | font-size:50%; 20 | opacity:0.6; 21 | margin-left:20px; 22 | margin-top:5px; 23 | } 24 | 25 | body > header img { 26 | position: relative; 27 | top: 10px; 28 | } 29 | 30 | section, body > header { 31 | width:100%; 32 | padding: 50px 30px; 33 | padding-left:23rem; 34 | box-sizing:border-box; 35 | } 36 | 37 | section:nth-child(2n) { 38 | background: #ebebeb; 39 | } 40 | 41 | h1, h2 { 42 | font-size:70px; 43 | font-family: 'Libre Baskerville', serif; 44 | font-weight:normal; 45 | color:#333; 46 | } 47 | 48 | h2 { 49 | font-size:30px; 50 | opacity:0.9 51 | } 52 | 53 | .figure-set { 54 | display: flex; 55 | flex-wrap: wrap; 56 | justify-content: center; 57 | } 58 | 59 | figure { 60 | background: white; 61 | margin: 10px; 62 | box-shadow: 0 0 10px rgba(0, 0,0 , 0.1); 63 | } 64 | 65 | figcaption { 66 | padding: 10px 25px; 67 | line-height:1.5; 68 | background: whitesmoke; 69 | width: 320px; 70 | box-sizing: border-box; 71 | background:#43a047; 72 | color:white; 73 | } 74 | 75 | figcaption a { 76 | color: white; 77 | border-bottom: 1px solid; 78 | padding-bottom: 4px; 79 | text-decoration: none; 80 | } 81 | 82 | figure img { 83 | width: 300px; 84 | margin: 0px 10px; 85 | } 86 | 87 | a.bookmarklet { 88 | padding: 13px 15px; 89 | background: #43a047; 90 | color: white; 91 | border-radius: 4px; 92 | text-decoration: none; 93 | } 94 | 95 | .examples { 96 | display:flex; 97 | flex-wrap: wrap; 98 | } 99 | 100 | .example { 101 | background: white; 102 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.16); 103 | display: flex; 104 | flex-direction: column; 105 | align-items: stretch; 106 | margin:20px; 107 | min-width:300px; 108 | } 109 | 110 | .example .title { 111 | background:#43a047; 112 | color: white; 113 | padding: 10px 25px; 114 | text-align:center; 115 | line-height:1.5; 116 | } 117 | 118 | code { 119 | font-family:monospace; 120 | background-color:rgba(66,66,66,0.4); 121 | padding:2px 5px; 122 | border-radius:2px; 123 | color:white; 124 | } 125 | 126 | 127 | .example.bad .title { 128 | background: #d32f2f; 129 | } 130 | 131 | .example pre { 132 | margin:0; 133 | font-family:monospace; 134 | border: none; 135 | background: #2d3041; 136 | color: white; 137 | padding: 20px; 138 | font-size:16px; 139 | line-height:1.4; 140 | position:relative; 141 | } 142 | 143 | pre.first::after { 144 | content: 'Edit me!'; 145 | position: absolute; 146 | top: 0; 147 | right: 0; 148 | padding: 6px 12px; 149 | background: #3F51B5; 150 | color: white; 151 | opacity:1; 152 | visibility:visible; 153 | transition: all 0.5s; 154 | } 155 | 156 | pre.first.first-focus::after { 157 | opacity:0; 158 | visibility:hidden; 159 | } 160 | 161 | 162 | /* triple selectors are needed to override MathJax FullWidth */ 163 | .mjx-full-width.mjx-full-width.mjx-full-width, 164 | .MathJax_FullWidth.MathJax_FullWidth.MathJax_FullWidth { 165 | width: 100% !important; 166 | } 167 | 168 | .example .result { 169 | background: white; 170 | font-size: 25px; 171 | display:flex; 172 | justify-content: center; 173 | align-items: center; 174 | padding:25px; 175 | flex-grow:1; 176 | } 177 | 178 | 179 | #toc { 180 | position: fixed; 181 | top: 0; 182 | left: 0; 183 | height:100%; 184 | background: #2d3041; 185 | color:white; 186 | padding: 1.5em; 187 | width:11em; 188 | line-height: 1.5; 189 | z-index: 2; 190 | } 191 | 192 | #toc a { 193 | display: block; 194 | opacity: 0.6; 195 | transition: 0.3s opacity; 196 | color: inherit; 197 | text-decoration: none; 198 | line-height: 1.7; 199 | } 200 | 201 | #toc a::before { 202 | content: '›'; 203 | display:inline-block; 204 | transform:translateX(-10px); 205 | opacity:0; 206 | transition:0.3s all; 207 | } 208 | 209 | #toc a:hover { 210 | opacity:0.9 !important; 211 | } 212 | 213 | #toc a.active { 214 | opacity:1 !important; 215 | } 216 | 217 | #toc a.active::before { 218 | transform: translateX(-5px); 219 | opacity:1; 220 | } 221 | 222 | #toc a.hidden { 223 | opacity:0 !important; 224 | } 225 | 226 | #toc-toggle { 227 | user-select: none; 228 | position:fixed; 229 | left:0; 230 | bottom:0; 231 | padding:10px 12px; 232 | z-index:10; 233 | display: none; 234 | background: #2d3041; 235 | color: white; 236 | border-top-right-radius: 2px; 237 | cursor: pointer; 238 | } 239 | 240 | #toc.active { 241 | position: fixed; 242 | padding-bottom: 3em; 243 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); 244 | overflow-y: auto; 245 | display: flex; 246 | flex-direction: column; 247 | } 248 | 249 | #toc.active a { 250 | margin: auto 0; 251 | } 252 | 253 | footer { 254 | background: #f1f1f1; 255 | padding: 20px; 256 | padding-left: 23rem; 257 | box-sizing: border-box; 258 | text-align: center; 259 | font-size: 15px; 260 | color: #4d4d4d; 261 | line-height: 1.6; 262 | } 263 | 264 | footer > span { 265 | margin: 0px 6px; 266 | } 267 | 268 | .love { 269 | color: #E53935; 270 | } 271 | 272 | footer a { 273 | text-decoration: none; 274 | color: #960000; 275 | white-space: nowrap; 276 | } 277 | 278 | 279 | @keyframes bounce { 280 | 0% { transform:scale(1); } 281 | 25% { transform:scale(1.05); } 282 | 50% { transform:scale(1); } 283 | 75% { transform:scale(1.05); } 284 | 100% { transform:scale(1); } 285 | } 286 | 287 | .highlight { 288 | animation: 1s bounce; 289 | } 290 | 291 | @media (max-width: 1300px) { 292 | #toc { 293 | position: relative; 294 | width: 100%; 295 | box-sizing: border-box; 296 | transform: translateX(0px); 297 | } 298 | 299 | #toc-toggle { 300 | display: inline-block; 301 | } 302 | 303 | body> header, body section, body footer { 304 | padding:50px; 305 | } 306 | } 307 | 308 | @media (max-width:900px) { 309 | html body > header, html body section, html footer { 310 | padding: 20px; 311 | box-sizing: border-box; 312 | } 313 | 314 | body>header, body h1 { 315 | font-size: 30px; 316 | } 317 | 318 | body header img { 319 | height:35px; 320 | } 321 | 322 | body h2 { 323 | font-size: 22px; 324 | } 325 | } 326 | 327 | @media (max-width: 650px) { 328 | body { 329 | font-size: 20px !important; 330 | } 331 | 332 | body .examples { 333 | display: flex; 334 | flex-direction: column; 335 | justify-content: flex-start; 336 | align-items: center; 337 | } 338 | 339 | .examples pre { 340 | word-break: break-word; 341 | word-wrap: break-word; 342 | white-space: pre-wrap; 343 | } 344 | .examples .example { 345 | width: 90vw; 346 | font-size: 90%; 347 | } 348 | 349 | .examples .example .result { 350 | font-size: 100%; 351 | } 352 | 353 | footer > span { 354 | display: block; 355 | } 356 | } 357 | -------------------------------------------------------------------------------- /content.txt: -------------------------------------------------------------------------------- 1 | # Arithmetic 2 | 3 | ## Basic Operators 4 | 5 | Basic operators work as expected 6 | 1 + 2 - 3 = 0 7 | 8 | Division can be done as follows 9 | 1/2 = 1 \div 2 = \frac{1}{2} 10 | 11 | To typeset bigger fractions, use 12 | \dfrac{1}{2} 13 | 14 | Or use `\displaystyle`. 15 | \displaystyle \frac{1}{3} 16 | 17 | Multiplication 18 | 2 \cdot 3 = 2 \times 3 19 | 20 | !bad Avoid using `*` for multiplication 21 | 2 * 3 22 | 23 | 24 | Repeated decimals can be denoted by a bar 25 | \frac{1}{7} = 0.\overline{142857} 26 | 27 | ## Exponents and Indexes 28 | 29 | Exponents can by typeset with a caret 30 | 2^3 = 8 31 | 32 | use braces to group exponents ... 33 | 2^{10} 34 | 35 | !bad ... to avoid 36 | 2^10 37 | 38 | Subscripts, like indices, can by typeset as follows 39 | a_n = 2 \cdot a_{n-1} 40 | 41 | ## Square roots 42 | 43 | A square root can be typeset with 44 | \sqrt{16} = 4 45 | 46 | To take the [math]n^\text{th}[/math] root, use 47 | \sqrt[3]{27} = 3 48 | 49 | `\pm` becomes a plus-minus. 50 | x^2 = 4 \implies x = \pm \sqrt{4} 51 | 52 | Braces can be omitted if the argument is only 1 symbol 53 | \sqrt 2 54 | 55 | ## Delimiters 56 | 57 | For large parentheses, use `\left` and `\right` ... 58 | \left( \dfrac{1}{x} \right) 59 | 60 | !bad ... to avoid the following 61 | (\dfrac{1}{x}) 62 | 63 | This can also be used with `|`, `[`, ... 64 | \left| \frac{x + 1}{x - 1} \right| 65 | 66 | Floor can be obtained with `\lfloor` and `\rfloor` 67 | \left\lfloor \frac{1}{2} \right\rfloor 68 | 69 | `\|` becomes a double bar 70 | \left\| \frac{z}{a} \right\| 71 | 72 | Angle brackets can be typeset as follows 73 | \langle x^2 + 1 \rangle 74 | 75 | To make them automatically grow, use 76 | \left< \dfrac{1}{2} \right> 77 | 78 | # Text and spacing 79 | 80 | ## text 81 | 82 | Use `\text` ... 83 | \text{Area 1} 84 | 85 | !bad ... to avoid the following 86 | Area 1 87 | 88 | This can be useful for ordinals 89 | 5^\text{th} 90 | 91 | ## Spacing 92 | 93 | `\ ` adds a space with the width of a space 94 | \blacksquare \ \blacksquare 95 | 96 | `\quad` and `\qquad` are bigger spaces 97 | \blacksquare \quad 98 | \blacksquare \qquad 99 | \blacksquare 100 | 101 | `\:` and `\,` are small spaces 102 | \blacksquare \: 103 | \blacksquare \, 104 | \blacksquare 105 | 106 | Small spaces are useful to group digits 107 | 54\,321 108 | 109 | 110 | # Equalities 111 | 112 | (In)equalities 113 | 1 + 1 = 2 \ne 3 \approx \pi 114 | 115 | Adding a tag will add a number and center your equation 116 | A = b \cdot h \tag 1 117 | 118 | Using `tag*` will remove the parentheses 119 | A = b \cdot h \tag* 2 120 | 121 | To center an equation without a tag, the following works 122 | A = b \cdot h \tag*{} 123 | 124 | `\lt` stands for less than 125 | 3 \lt x \le 4 126 | 127 | `\gt` stands for greater than 128 | x \gt 3 129 | 130 | `\ge` stands for greater than or equal to 131 | x \ge 3 132 | 133 | `\not` can be used to negate anything, but is often ugly 134 | x \not\gt 4 135 | 136 | [math]T[/math] is proportional to [math]p[/math] 137 | T \propto p \text{ or } T \sim p 138 | 139 | ## Alignment of equal signs 140 | 141 | Align equal signs as follows 142 | \begin{align} 143 | 2 + 2 &= 4 \\ 144 | 2 &= 4 - 2 145 | \end{align} 146 | 147 | You can also give a tag to a line 148 | \begin{align} 149 | 2 + 2 &= 4 \tag 1 \\ 150 | 2 &= 4 - 2 \\ 151 | 2 &= 2 \tag a 152 | \end{align} 153 | 154 | To give some more explanation, add some text 155 | \begin{align} 156 | 2 + 2 &= 4 \tag 1 \\ 157 | 2 &= 4 - 2 && \text{subtracting 2} \\ 158 | 2 &= 2 \tag a 159 | \end{align} 160 | 161 | System of equations 162 | S = \left\{ 163 | \begin{aligned} 164 | a + b &= 4\\ 165 | a \cdot b &= 4 166 | \end{aligned} 167 | \right. 168 | 169 | ## Annotating equalities 170 | 171 | Overset can be used to stack symbols 172 | 2 \overset{?}{=} 3 173 | 174 | !bad Arrows are sometimes too short 175 | \overset{\text{some text}}{\rightarrow} 176 | 177 | Use `\xrightarrow` instead 178 | \xrightarrow{\text{some text}} 179 | 180 | Underbrace and overbrace in action 181 | (\cos x + \sin x)^2 = 182 | \underbrace{\cos^2 x + \sin^2 x}_{1} + 183 | \overbrace{2 \sin x \cos x}^{\sin 2x} 184 | 185 | ## Modulo 186 | 187 | If [math]\text{mod}[/math] is used as a binary operator 188 | 7 \bmod 4 = 3 189 | 190 | If it's used after an equation 191 | 7 \equiv 3 \pmod 4 192 | 193 | Without parentheses 194 | 7 \equiv 3 \mod 4 195 | 196 | # Geometry 197 | 198 | ## Angles 199 | 200 | Use `\angle` to denote an angle 201 | \angle A = 90^\circ 202 | 203 | `\hat` and `\widehat` are another possibility 204 | \hat A = \widehat{BAC} = 90^\circ 205 | 206 | For radians, the following works 207 | \angle A = \frac{\pi}{2} \text{ radians} 208 | 209 | ## Greek letters 210 | 211 | Some Greek letters 212 | \alpha \beta \gamma \delta 213 | 214 | Greek uppercase letters 215 | \Gamma \Delta \Theta \Xi \Lambda 216 | 217 | Phi and epsilon have variants 218 | \phi, \varphi \quad \epsilon, \varepsilon 219 | 220 | Likewise for theta, kappa ... 221 | \theta, \vartheta \quad \kappa, \varkappa 222 | 223 | ... pi and rho 224 | \pi, \varpi \quad \rho, \varrho 225 | 226 | 227 | ## Other symbols 228 | 229 | Useful shapes 230 | \triangle, \square, \bigcirc 231 | 232 | Perpendicular 233 | AB \perp BC 234 | 235 | Parallel 236 | AB \parallel CD 237 | 238 | Similarity 239 | \triangle ABC \sim \triangle CEF 240 | 241 | Congruence 242 | \triangle ABC \cong \triangle CEF 243 | 244 | # Functions 245 | 246 | ## Standard functions 247 | 248 | Write standard functions with a backslash 249 | \log x 250 | 251 | !bad Not doing so gives bad results 252 | log x 253 | 254 | Lots of functions are available ... 255 | \exp x, \sin x, \arccos x, \cosh x, \max x 256 | 257 | 258 | ## Introducing functions 259 | 260 | Some functions aren't available.
Use `operatorname` 261 | \operatorname{arccosh} x 262 | 263 | Another way of defining a function 264 | \begin{align} 265 | f\colon \R &\to \R^+\\ 266 | x &\mapsto x^2 267 | \end{align} 268 | 269 | Piecewise functions 270 | f(x) = \begin{cases} 271 | x & \text{if $x \gt 0$}\\ 272 | x^2 & \text{else} 273 | \end{cases} 274 | 275 | ## Operations with functions 276 | 277 | Derivative 278 | f'(x) = \frac{df}{dx} 279 | 280 | Composition 281 | (f \circ g)(x) = f(g(x)) 282 | 283 | Inverse 284 | f^{-1}(x) 285 | 286 | # Sums and Series 287 | 288 | ## Summation and products 289 | 290 | Typesetting sums is easy 291 | \sum_{n=1}^\infty x^n 292 | 293 | `\displaystyle` makes it breathe some more 294 | \displaystyle \sum_{n=1}^\infty x^n 295 | 296 | `\limits` maintains the small style, but shifts
the limits to the bottom of the sum 297 | \sum\limits_{n=1}^\infty x^n 298 | 299 | Products can be typeset in a similar fashion 300 | \displaystyle \prod_{n=1}^\infty x^n 301 | 302 | ## Continuation dots 303 | 304 | !bad Never use `...` to make dots 305 | 1 + 2 - 3 + 4 ... 306 | 307 | `\ldots` gives low dots 308 | 1, 2, \ldots, 10 309 | 310 | `\cdots` gives centered dots 311 | f(x) = x + x^2 + x^3 + \cdots 312 | 313 | Vertical and diagonal dots are useful in matrices 314 | \begin{pmatrix} 315 | 1 & 1 & \cdots & 1 \\ 316 | 0 & 1 & \cdots & 1 \\ 317 | 0 & 0 & \ddots & \vdots \\ 318 | 0 & 0 & 0 & 1 319 | \end{pmatrix} 320 | 321 | # Infinity 322 | 323 | The inf(ini)ty symbol 324 | \infty 325 | 326 | Cardinal infinity 327 | |\N| = \aleph_0, 328 | |\R| = \mathfrak c 329 | 330 | Ordinal infinity 331 | \omega^\omega = \text{big} 332 | 333 | Complex infinity 334 | \tilde\infty 335 | 336 | 337 | 338 | # Logic 339 | 340 | Logical or, logical and 341 | a \lor b \land c 342 | 343 | Negation 344 | \bar{c} \equiv \lnot c 345 | 346 | True and false 347 | \top \land \bot \equiv \bot 348 | 349 | Implications 350 | (a \implies b) \iff (b \impliedby a) 351 | 352 | Quantifiers 353 | \forall A, \exists B : A \lt B 354 | 355 | # Sets 356 | 357 | ## Braces 358 | 359 | !bad `{}` don't work, as they group objects 360 | {1, 2, 3} 361 | 362 | Escape them with a backslash 363 | \{1, 2, 3\} 364 | 365 | Use `\mathbb` to get double stroked letters 366 | \mathbb{N} = \{0, 1, 2, 3, \ldots \} 367 | 368 | You can also use the following shorthands 369 | \O, \N, \Z, \Q, \R, \C 370 | 371 | `\mid` inserts a vertical bar 372 | \{n^2 \mid n \in \N\} 373 | 374 | ## Cup and Cap 375 | 376 | Unify and intersect 377 | A \cup B = C \cap D 378 | 379 | Element of a set 380 | x \in A 381 | 382 | Superset and subset are self-explanatory 383 | A \subset B \iff B \supset A 384 | 385 | Add `eq` to get 386 | A \subseteq B 387 | 388 | To subtract a set, write 389 | \N_0 = \N \setminus \{0\} 390 | 391 | ## Others 392 | 393 | Empty set 394 | \emptyset = \varnothing 395 | 396 | Powerset 397 | \mathcal P \{1, 2\} = \{\{\}, \{1\}, \{2\}, \{1,2\} \} 398 | 399 | # Combinatorics 400 | 401 | Factorial 402 | 4! = 4 \cdot 3 \cdot 2 \cdot 1 403 | 404 | Binomial notation 405 | {n \choose r} = \binom{n}{r} = \frac{n!}{(n-r)!r!} 406 | 407 | Other ways 408 | {}^n\text{C}_r = {}_n\text{C}_r = \text{C}_r^n 409 | 410 | # Complex numbers 411 | 412 | The complex set 413 | a + ib \in \C 414 | 415 | The real part 416 | \Re \left( e^{ix} \right) = \cos x 417 | 418 | The imaginary part 419 | \Im \left( e^{ix} \right) = \sin x 420 | 421 | The conjugate of a number 422 | \overline z = \Re (z) - i \Im (z) 423 | 424 | The magnitude 425 | |z| = \| z \| 426 | 427 | The argument 428 | \arg z 429 | 430 | 431 | 432 | # Calculus 433 | 434 | ## Limits 435 | 436 | Limits can be typeset with a subscript 437 | \lim_{x \to \infty} x^2 = \infty 438 | 439 | Displaystyle makes it breathe more 440 | \displaystyle\lim_{x \to \infty} x^2 = \infty 441 | 442 | ## Derivatives 443 | 444 | Typeset derivatives using fractions 445 | \dfrac{dy}{dx} 446 | 447 | If you want [math]\mathrm d[/math] to be upright, use 448 | \dfrac{\mathrm dy}{\mathrm dx} 449 | 450 | Derivative at a point 451 | \left. \dfrac{dy}{dx} \right|_{x=0} 452 | 453 | Partial derivatives 454 | \dfrac{\partial f(x,y)}{\partial x} = f_x 455 | 456 | Difference quotients 457 | \dfrac{\Delta y}{\Delta x} 458 | 459 | Derivates w.r.t. time 460 | \dot x, \ddot x 461 | 462 | You can add this once ... 463 | \newcommand\deriv[2]{\frac{\mathrm d #1}{\mathrm d #2}} 464 | \deriv{f}{x} 465 | 466 | ... to shorten repeated use 467 | \deriv{y}{x} 468 | 469 | 470 | ## Integrals 471 | 472 | Here, `\,` adds a small space 473 | \int x \, dx = \frac{x^2}{2} 474 | 475 | For an upright [math]\mathrm d[/math], use 476 | \int x \, \mathrm dx = \frac{x^2}{2} 477 | 478 | !bad Never use consecutive `\int`s 479 | \int \int x^2 + y^2 \,dx \,dy 480 | 481 | Use `\iint` instead 482 | \iint x^2 + y^2 \,dx \, dy 483 | 484 | Lower and upper bounds 485 | \int_a^b x \, dx 486 | 487 | Displaystyle makes it breathe more 488 | \displaystyle\int_a^b x \, dx 489 | 490 | Evaluating integrals. `\left.` is an invisible bracket 491 | \displaystyle 492 | \int_0^1 x \, dx = \left. \frac{x^2}{2} \right|_0^1 493 | 494 | Closed path integral 495 | \displaystyle 496 | \oint_C \mathbf F \cdot d \mathbf r 497 | 498 | `\limits` places the boundaries under the integral sign 499 | \displaystyle\oint\limits_C \mathbf F \cdot d \mathbf r 500 | 501 | # Vectors 502 | 503 | Choose one of the following 504 | \mathbf{u} = \vec u 505 | 506 | 507 | Use `\imath` and `\jmath` for unit vectors ... 508 | \hat \imath, \hat \jmath, \hat k 509 | 510 | !bad ... to avoid 511 | \hat i, \hat j, \hat k 512 | 513 | 514 | Take the cross product with `\times` 515 | \vec u \times \vec v 516 | 517 | Take the dot product with `\cdot` 518 | \vec u \cdot \vec v 519 | 520 | Angle brackets can be used 521 | \vec u = \left< u_x, u_y, u_z \right> 522 | 523 | The nabla operator 524 | \nabla f = \operatorname{grad} f 525 | 526 | Divergence of a vector field 527 | \nabla \cdot \mathbf F 528 | = \operatorname{div} \mathbf F 529 | 530 | For repeated use, add this once ... 531 | \DeclareMathOperator{\div}{div} 532 | \div \mathbf F 533 | 534 | ... and use it as many times as you want. 535 | \div \mathbf A = \div \mathbf B 536 | 537 | Curl of a vector field 538 | \nabla \times \mathbf F 539 | = \operatorname{curl} \mathbf F 540 | 541 | 542 | # Matrices 543 | 544 | Make a matrix with parentheses 545 | \begin{pmatrix} 546 | 0 & 1\\ 547 | 1 & 1 548 | \end{pmatrix} 549 | 550 | Make a matrix with brackets 551 | \begin{bmatrix} 552 | 0 & 1\\ 553 | 1 & 1 554 | \end{bmatrix} 555 | 556 | The adjugate matrix 557 | \operatorname{adj} A 558 | 559 | Transposing a matrix 560 | A^\top \text{ or } A^\intercal 561 | 562 | The determinant 563 | \det A = \begin{vmatrix} 564 | 0 & 1\\ 565 | 1 & 1 566 | \end{vmatrix} = -1 567 | 568 | Add some centered, vertical and diagonal dots 569 | \begin{bmatrix} 570 | 1 & 0 & \cdots & 0 \\ 571 | 0 & 1 & \cdots & 0 \\ 572 | \vdots & \vdots & \ddots & \vdots\\ 573 | 0 & 0 & \cdots & 1 \\ 574 | \end{bmatrix} 575 | -------------------------------------------------------------------------------- /dist/images/keyboard.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 23 | 25 | 53 | 61 | 62 | 64 | 65 | 67 | image/svg+xml 68 | 70 | 71 | 72 | 73 | 74 | 79 | 82 | 85 | 88 | 91 | 97 | 105 | 106 | L 118 | 119 | 122 | 130 | 136 | 137 | 140 | 143 | 149 | 157 | 158 | 164 | 165 | 166 | 169 | 172 | 175 | 181 | 189 | 190 | L 202 | 203 | 206 | 214 | Ctrl 226 | 227 | 230 | 233 | 239 | 247 | 248 | 254 | 255 | 256 | OR 268 | 269 | 270 | 271 | --------------------------------------------------------------------------------