This repository has been archived by the owner on Feb 22, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
151 lines (144 loc) · 7.45 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
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, shrink-to-fit=no">
<meta name="author" content="Jared Dantis">
<title>Messenger Text Formatting</title>
<!-- Twitter Card -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@aureljared" />
<meta name="twitter:title" content="Messenger Text Formatting" />
<meta name="twitter:description" content="Learn how to use bold, italics, and more in Messenger." />
<meta name="twitter:image" content="https://jared.gq/img/logo.jpg" />
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="./styles/style.css">
<link rel="stylesheet" type="text/css" href="./styles/media.css">
<!-- Favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="https://jared.gq/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://jared.gq/favicons/favicon-16x16.png">
<link rel="manifest" href="https://jared.gq/favicons/manifest.json">
<link rel="mask-icon" href="https://jared.gq/favicons/safari-pinned-tab.svg" color="#207285">
<link rel="shortcut icon" href="https://jared.gq/favicons/favicon.ico">
<meta name="msapplication-config" content="https://jared.gq/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<!-- App begin -->
<div class="header">
<a class="noul" href="https://jared.gq"><img src="https://jared.gq/img/name.svg" alt="Jared Dantis"></a>
<h1>Formatting text with<br>Facebook Messenger</h1>
<h2><strong>Note:</strong> Right now, this works only on <a href="https://messenger.com/">desktop.</a></h2>
<div class="social">
<div class="fb-like" data-href="http://by.jared.gq/2v6v7OJ" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="false"></div>
<div class="fb-share-button" data-href="http://by.jared.gq/2v6v7OJ" data-layout="button_count" data-size="small" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fby.jared.gq%2F2v6v7OJ&src=sdkpreparse">Share</a></div>
<a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=See%20how%20to%20format%20text%20in%20Messenger%20at%20http%3A%2F%2Fby.jared.gq%2F2v6v7OJ%20%E2%9C%A8" data-size="small">
Tweet</a>
</div>
</div>
<div class="section" id="basics">
<h1>Bold, italics, strikethrough</h1>
<div class="conv">
<div class="you"><p>*This text is in bold.*</p></div>
<div class="them"><p><strong>This text is in bold.</strong></p></div>
<div class="you"><p>_This text is in italics._</p></div>
<div class="them"><p><em>This text is in italics.</em></p></div>
<div class="you"><p>~This text is in strikethrough.~</p></div>
<div class="them"><p><span class="str">This text is in strikethrough.</span></p></div>
</div>
</div>
<div class="section" id="mono">
<h1>Monospaced text</h1>
<div class="conv">
<div class="you"><p>This word is `monospaced.`</p></div>
<div class="them"><p>This word is <code>monospaced.</code></p></div>
<div class="you"><p>`This line is monospaced.`</p></div>
<div class="them"><p><code>This line is monospaced.</code></p></div>
</div>
</div>
<div class="section" id="code">
<h1>Syntax highlighting</h1>
<p>The general format is <code>```language <code> ```.</code></p>
<div class="conv">
<div class="you">
<p>
```html<br>
<h1>HTML code!</h1><br>
```
</p>
</div>
<div class="them code">
<p>
<h1>HTML code!</h1>
</p>
</div>
<div class="you">
<p>
```php<br>
session_start();<br>
echo "This is PHP code!";<br>
```
</p>
</div>
<div class="them code">
<p>
<code class="fn">session_start</code><code class="pc">();</code><br>
<code class="kw">echo </code><code class="st">"This is PHP code!"</code><code class="pc">;</code>
</p>
</div>
</div>
</div>
<div class="section" id="tex">
<h1><img src="images/TeX_logo.svg"> mathematics syntax</h1>
<p>Messenger seems to use<sup><a href="https://www.reddit.com/r/math/comments/6ug91z/facebook_messenger_now_renders_basic_latex/" target="_blank">1</a></sup> KaTeX, so you can follow the commands outlined in <a href="https://khan.github.io/KaTeX/function-support.html" title="">KaTeX's wiki.</a> There are too many to list here.</p>
<div class="conv">
<div class="you"><p>$$ \frac{1}{\frac{1}{2} - \frac{1}{3}} $$</p></div>
<div class="them tex-1"><img src="images/Eqn1.svg" alt=""></div>
<div class="you"><p>$$ E = \frac{mc^2}{\sqrt{1-\frac{v^2}{c^2}}} $$</p></div>
<div class="them tex-2"><img src="images/Eqn2.svg" alt=""></div>
</div>
<p>If you want to type a TeX equation inline, wrap it with <strong>\( ... \)</strong> instead of <strong>$$ ... $$</strong>.</p>
<div class="conv">
<div class="you"><p>Did you know that \( \sin 2\alpha = 2 \sin \alpha \cos \alpha \) ?</p></div>
<div class="them tex-3"><p>Did you know that <img src="images/Eqn3.svg" alt=""> ?</p></div>
</div>
<div class="section">
<h1>This website is open source!</h1>
<p>Have anything to add? Drop by the <a href="http://github.com/aureljared/messenger-formatting" title="GitHub page">GitHub page</a> and start contributing 😁</p>
</div>
</div>
<!-- Facebook -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Twitter -->
<script>window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));</script>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-105023016-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>