]> git.mxchange.org Git - friendica.git/blob - doc/BBCode.md
Merge pull request #6204 from annando/escaping
[friendica.git] / doc / BBCode.md
1 Friendica BBCode tags reference
2 ========================
3
4 * [Creating posts](help/Text_editor)
5
6 ## Inline
7
8 <style>
9 table.bbcodes {
10     margin: 1em 0;
11     background-color: #f9f9f9;
12     border: 1px solid #aaa;
13     border-collapse: collapse;
14     color: #000;
15     width: 100%;
16 }
17
18 table.bbcodes > tr > th,
19 table.bbcodes > tr > td,
20 table.bbcodes > * > tr > th,
21 table.bbcodes > * > tr > td {
22     border: 1px solid #aaa;
23     padding: 0.2em 0.4em
24 }
25
26 table.bbcodes > tr > th,
27 table.bbcodes > * > tr > th {
28     background-color: #f2f2f2;
29     text-align: center;
30     width: 50%
31 }
32 </style>
33
34 <table class="bbcodes">
35 <tr>
36   <th>BBCode</th>
37   <th>Result</th>
38 </tr>
39 <tr>
40   <td>[b]bold[/b]</td>
41   <td><strong>bold</strong></td>
42 </tr>
43 <tr>
44   <td>[i]italic[/i]</td>
45   <td><em>italic</em></td>
46 </tr>
47 <tr>
48   <td>[u]underlined[/u]</td>
49   <td><u>underlined</u></td>
50 </tr>
51 <tr>
52   <td>[s]strike[/s]</td>
53   <td><strike>strike</strike></td>
54 </tr>
55 <tr>
56   <td>[o]overline[/o]</td>
57   <td><span class="overline">overline</span></td>
58 </tr>
59 <tr>
60   <td>[color=red]red[/color]</td>
61   <td><span style="color:  red;">red</span></td>
62 </tr>
63 <tr>
64   <td>[url=http://friendi.ca]Friendica[/url]</td>
65   <td><a href="http://friendi.ca" target="external-link">Friendica</a></td>
66 </tr>
67 <tr>
68   <td>[img]https://raw.githubusercontent.com/friendica/friendica/master/images/friendica-32.jpg[/img]</td>
69   <td><img src="https://raw.githubusercontent.com/friendica/friendica/master/images/friendica-32.jpg" alt="Immagine/foto"></td>
70 </tr>
71 <tr>
72   <td>[img=64x32]https://raw.githubusercontent.com/friendica/friendica/master/images/friendica-32.jpg[/img]<br>
73 <br>Note: provided height is simply discarded.</td>
74   <td><img src="https://raw.githubusercontent.com/friendica/friendica/master/images/friendica-32.jpg" style="width: 64px;"></td>
75 </tr>
76 <tr>
77   <td>[size=xx-small]small text[/size]</td>
78   <td><span style="font-size: xx-small;">small text</span></td>
79 </tr>
80 <tr>
81   <td>[size=xx-large]big text[/size]</td>
82   <td><span style="font-size: xx-large;">big text</span></td>
83 </tr>
84 <tr>
85   <td>[size=20]exact size[/size] (size can be any number, in pixels)</td>
86   <td><span style="font-size: 20px;">exact size</span></td>
87 </tr>
88 <tr>
89   <td>[font=serif]Serif font[/font]</td>
90   <td><span style="font-family: serif;">Serif font</span></td>
91 </tr>
92 </table>
93
94 ### Links
95
96 <table class="bbcodes">
97 <tr>
98   <th>BBCode</th>
99   <th>Result</th>
100 </tr>
101 <tr>
102   <td>[url]http://friendi.ca[/url]</td>
103   <td><a href="http://friendi.ca">http://friendi.ca</a></td>
104 </tr>
105 <tr>
106   <td>[url=http://friendi.ca]Friendica[/url]</td>
107   <td><a href="http://friendi.ca">Friendica</a></td>
108 </tr>
109 <tr>
110   <td>[bookmark]http://friendi.ca[/bookmark]<br><br>
111 #^[url]http://friendi.ca[/url]</td>
112   <td><span class="oembed link"><h4>Friendica: <a href="http://friendi.ca" rel="oembed"></a><a href="http://friendi.ca" target="_blank">http://friendi.ca</a></h4></span></td>
113 </tr>
114 <tr>
115   <td>[bookmark=http://friendi.ca]Bookmark[/bookmark]<br><br>
116 #^[url=http://friendi.ca]Bookmark[/url]<br><br>
117 #[url=http://friendi.ca]^[/url][url=http://friendi.ca]Bookmark[/url]</td>
118   <td><span class="oembed link"><h4>Friendica: <a href="http://friendi.ca" rel="oembed"></a><a href="http://friendi.ca" target="_blank">Bookmark</a></h4></span></td>
119 </tr>
120 <tr>
121   <td>[url=/posts/f16d77b0630f0134740c0cc47a0ea02a]Diaspora post with GUID[/url]</td>
122   <td><a href="/display/f16d77b0630f0134740c0cc47a0ea02a" target="_blank">Diaspora post with GUID</a></td>
123 </tr>
124 <tr>
125   <td>#Friendica</td>
126   <td>#<a href="/search?tag=Friendica">Friendica</a></td>
127 </tr>
128 <tr>
129   <td>@Mention</td>
130   <td>@<a href="javascript:void(0)">Mention</a></td>
131 </tr>
132 <tr>
133   <td>acct:account@friendica.host.com (WebFinger)</td>
134   <td><a href="/acctlink?addr=account@friendica.host.com" target="extlink">acct:account@friendica.host.com</a></td>
135 </tr>
136 <tr>
137   <td>[mail]user@mail.example.com[/mail]</td>
138   <td><a href="mailto:user@mail.example.com">user@mail.example.com</a></td>
139 </tr>
140 <tr>
141   <td>[mail=user@mail.example.com]Send an email to User[/mail]</td>
142   <td><a href="mailto:user@mail.example.com">Send an email to User</a></td>
143 </tr>
144 </table>
145
146 ## Blocks
147
148 <table class="bbcodes">
149 <tr>
150   <th>BBCode</th>
151   <th>Result</th>
152 </tr>
153 <tr>
154   <td>[p]A paragraph of text[/p]</td>
155   <td><p>A paragraph of text</p></td>
156 </tr>
157 <tr>
158   <td>Inline [code]code[/code] in a paragraph</td>
159   <td>Inline <key>code</key> in a paragraph</td>
160 </tr>
161 <tr>
162   <td>[code]Multi<br>line<br>code[/code]</td>
163   <td><code>Multi
164 line
165 code</code></td>
166 </tr>
167 <tr>
168   <td>[code=php]function text_highlight($s,$lang)[/code]<sup><a href="#supported-code">1</a></sup></td>
169   <td><code><div class="hl-main"><ol class="hl-main"><li><span class="hl-code">&nbsp;</span><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">text_highlight</span><span class="hl-brackets">(</span><span class="hl-var">$s</span><span class="hl-code">,</span><span class="hl-var">$lang</span><span class="hl-brackets">)</span></li></ol></div></code></td>
170 </tr>
171 <tr>
172   <td>[quote]quote[/quote]</td>
173   <td><blockquote>quote</blockquote></td>
174 </tr>
175 <tr>
176   <td>[quote=Author]Author? Me? No, no, no...[/quote]</td>
177   <td><strong class="author">Author wrote:</strong><blockquote>Author? Me? No, no, no...</blockquote></td>
178 </tr>
179 <tr>
180   <td>[center]Centered text[/center]</td>
181   <td><div style="text-align:center;">Centered text</div></td>
182 </tr>
183 <tr>
184   <td>You should not read any further if you want to be surprised.[spoiler]There is a happy end.[/spoiler]</td>
185   <td>
186     <div class="wall-item-container">
187       You should not read any further if you want to be surprised.<br>
188       <span id="spoiler-wrap-0716e642" class="spoiler-wrap fakelink" onclick="openClose('spoiler-0716e642');">Click to open/close</span>
189       <blockquote class="spoiler" id="spoiler-0716e642" style="display: none;">There is a happy end.</blockquote>
190       <div class="body-attach"><div class="clear"></div></div>
191     </div>
192   </td>
193 </tr>
194 <tr>
195   <td>[spoiler=Author]Spoiler quote[/spoiler]</td>
196   <td>
197     <div class="wall-item-container">
198       <strong class="spoiler">Author wrote:</strong><br>
199       <span id="spoiler-wrap-a893765a" class="spoiler-wrap fakelink" onclick="openClose('spoiler-a893765a');">Click to open/close</span>
200       <blockquote class="spoiler" id="spoiler-a893765a" style="display: none;">Spoiler quote</blockquote>
201       <div class="body-attach"><div class="clear"></div></div>
202     </div>
203   </td>
204 </tr>
205 <tr>
206   <td>[hr] (horizontal line)</td>
207   <td><hr></td>
208 </tr>
209 </table>
210
211 <a name="supported-code">1</a>: Supported language parameter values for code highlighting:
212 - abap
213 - avrc
214 - cpp
215 - css
216 - diff
217 - dtd
218 - html
219 - java
220 - javascript
221 - js
222 - mysql
223 - perl
224 - php
225 - python
226 - ruby
227 - sh
228 - sql
229 - vbscript
230 - xml
231
232 ### Titles
233
234 <table class="bbcodes">
235 <tr>
236   <th>BBCode</th>
237   <th>Result</th>
238 </tr>
239 <tr>
240   <td>[h1]Title 1[/h1]</td>
241   <td><h1>Title 1</h1></td>
242 </tr>
243 <tr>
244   <td>[h2]Title 2[/h2]</td>
245   <td><h2>Title 2</h2></td>
246 </tr>
247 <tr>
248   <td>[h3]Title 3[/h3]</td>
249   <td><h3>Title 3</h3></td>
250 </tr>
251 <tr>
252   <td>[h4]Title 4[/h4]</td>
253   <td><h4>Title 4</h4></td>
254 </tr>
255 <tr>
256   <td>[h5]Title 5[/h5]</td>
257   <td><h5>Title 5</h5></td>
258 </tr>
259 <tr>
260   <td>[h6]Title 6[/h6]</td>
261   <td><h6>Title 6</h6></td>
262 </tr>
263 </table>
264
265 ### Tables
266
267 <table class="bbcodes">
268 <tr>
269   <th>BBCode</th>
270   <th>Result</th>
271 </tr>
272 <tr>
273   <td>[table]<br>
274 &nbsp;&nbsp;[tr]<br>
275 &nbsp;&nbsp;&nbsp;&nbsp;[th]Header 1[/th]<br>
276 &nbsp;&nbsp;&nbsp;&nbsp;[th]Header 2[/th]<br>
277 &nbsp;&nbsp;&nbsp;&nbsp;[th]Header 2[/th]<br>
278 &nbsp;&nbsp;[/tr]<br>
279 &nbsp;&nbsp;[tr]<br>
280 &nbsp;&nbsp;&nbsp;&nbsp;[td]Cell 1[/td]<br>
281 &nbsp;&nbsp;&nbsp;&nbsp;[td]Cell 2[/td]<br>
282 &nbsp;&nbsp;&nbsp;&nbsp;[td]Cell 3[/td]<br>
283 &nbsp;&nbsp;[/tr]<br>
284 &nbsp;&nbsp;[tr]<br>
285 &nbsp;&nbsp;&nbsp;&nbsp;[td]Cell 4[/td]<br>
286 &nbsp;&nbsp;&nbsp;&nbsp;[td]Cell 5[/td]<br>
287 &nbsp;&nbsp;&nbsp;&nbsp;[td]Cell 6[/td]<br>
288 &nbsp;&nbsp;[/tr]<br>
289 [/table]</td>
290   <td>
291         <table>
292       <tbody>
293         <tr>
294           <th>Header 1</th>
295           <th>Header 2</th>
296           <th>Header 3</th>
297         </tr>
298         <tr>
299           <td>Cell 1</td>
300           <td>Cell 2</td>
301           <td>Cell 3</td>
302         </tr>
303         <tr>
304           <td>Cell 4</td>
305           <td>Cell 5</td>
306           <td>Cell 6</td>
307         </tr>
308       </tbody>
309     </table>
310   </td>
311 </tr>
312 <tr>
313   <td>[table border=0]</td>
314   <td>
315         <table border="0">
316       <tbody>
317         <tr>
318           <th>Header 1</th>
319           <th>Header 2</th>
320           <th>Header 3</th>
321         </tr>
322         <tr>
323           <td>Cell 1</td>
324           <td>Cell 2</td>
325           <td>Cell 3</td>
326         </tr>
327         <tr>
328           <td>Cell 4</td>
329           <td>Cell 5</td>
330           <td>Cell 6</td>
331         </tr>
332       </tbody>
333     </table>
334   </td>
335 </tr>
336 <tr>
337   <td>[table border=1]</td>
338   <td>
339         <table border="1">
340       <tbody>
341         <tr>
342           <th>Header 1</th>
343           <th>Header 2</th>
344           <th>Header 3</th>
345         </tr>
346         <tr>
347           <td>Cell 1</td>
348           <td>Cell 2</td>
349           <td>Cell 3</td>
350         </tr>
351         <tr>
352           <td>Cell 4</td>
353           <td>Cell 5</td>
354           <td>Cell 6</td>
355         </tr>
356       </tbody>
357     </table>
358   </td>
359 </tr>
360 </table>
361
362 ### Lists
363
364 <table class="bbcodes">
365 <tr>
366   <th>BBCode</th>
367   <th>Result</th>
368 </tr>
369 <tr>
370   <td>[ul]<br>
371 &nbsp;&nbsp;[li] First list element<br>
372 &nbsp;&nbsp;[li] Second list element<br>
373 [/ul]<br>
374 [list]<br>
375 &nbsp;&nbsp;[*] First list element<br>
376 &nbsp;&nbsp;[*] Second list element<br>
377 [/list]</td>
378   <td>
379         <ul class="listbullet" style="list-style-type: circle;">
380                 <li>First list element</li>
381                 <li>Second list element</li>
382         </ul>
383   </td>
384 </tr>
385 <tr>
386   <td>[ol]<br>
387 &nbsp;&nbsp;[*] First list element<br>
388 &nbsp;&nbsp;[*] Second list element<br>
389 [/ol]<br>
390 [list=1]<br>
391 &nbsp;&nbsp;[*] First list element<br>
392 &nbsp;&nbsp;[*] Second list element<br>
393 [/list]</td>
394   <td>
395     <ul class="listdecimal" style="list-style-type: decimal;">
396       <li> First list element</li>
397       <li> Second list element</li>
398     </ul>
399   </td>
400 </tr>
401 <tr>
402   <td>[list=]<br>
403 &nbsp;&nbsp;[*] First list element<br>
404 &nbsp;&nbsp;[*] Second list element<br>
405 [/list]</td>
406   <td>
407     <ul class="listnone" style="list-style-type: none;">
408       <li> First list element</li>
409       <li> Second list element</li>
410     </ul>
411   </td>
412 </tr>
413 <tr>
414   <td>[list=i]<br>
415 &nbsp;&nbsp;[*] First list element<br>
416 &nbsp;&nbsp;[*] Second list element<br>
417 [/list]</td>
418   <td>
419     <ul class="listlowerroman" style="list-style-type: lower-roman;">
420       <li> First list element</li>
421       <li> Second list element</li>
422     </ul>
423   </td>
424 </tr>
425 <tr>
426   <td>[list=I]<br>
427 &nbsp;&nbsp;[*] First list element<br>
428 &nbsp;&nbsp;[*] Second list element<br>
429 [/list]</td>
430   <td>
431     <ul class="listupperroman" style="list-style-type: upper-roman;">
432       <li> First list element</li>
433       <li> Second list element</li>
434     </ul>
435   </td>
436 </tr>
437 <tr>
438   <td>[list=a]<br>
439 &nbsp;&nbsp;[*] First list element<br>
440 &nbsp;&nbsp;[*] Second list element<br>
441 [/list]</td>
442   <td>
443     <ul class="listloweralpha" style="list-style-type: lower-alpha;">
444       <li> First list element</li>
445       <li> Second list element</li>
446     </ul>
447   </td>
448 </tr>
449 <tr>
450   <td>[list=A]<br>
451 &nbsp;&nbsp;[*] First list element<br>
452 &nbsp;&nbsp;[*] Second list element<br>
453 [/list]</td>
454   <td>
455     <ul class="listupperalpha" style="list-style-type: upper-alpha;">
456       <li> First list element</li>
457       <li> Second list element</li>
458     </ul>
459   </td>
460 </tr>
461 </table>
462
463 ## Embed
464
465 You can embed video, audio and more in a message.
466
467 <table class="bbcodes">
468 <tr>
469   <th>BBCode</th>
470   <th>Result</th>
471 </tr>
472 <tr>
473   <td>[video]url[/video]</td>
474   <td>Where *url* can be an url to youtube, vimeo, soundcloud, or other sites wich supports oembed or opengraph specifications.</td>
475 </tr>
476 <tr>
477   <td>[video]Video file url[/video]
478 [audio]Audio file url[/audio]</td>
479   <td>Full URL to an ogg/ogv/oga/ogm/webm/mp4/mp3 file. An HTML5 player will be used to show it.</td>
480 </tr>
481 <tr>
482   <td>[youtube]Youtube URL[/youtube]</td>
483   <td>Youtube video OEmbed display. May not embed an actual player.</td>
484 </tr>
485 <tr>
486   <td>[youtube]Youtube video ID[/youtube]</td>
487   <td>Youtube player iframe embed.</td>
488 </tr>
489 <tr>
490   <td>[vimeo]Vimeo URL[/vimeo]</td>
491   <td>Vimeo video OEmbed display. May not embed an actual player.</td>
492 </tr>
493 <tr>
494   <td>[vimeo]Vimeo video ID[/vimeo]</td>
495   <td>Vimeo player iframe embed.</td>
496 </tr>
497 <tr>
498   <td>[embed]URL[/embed]</td>
499   <td>Embed OEmbed rich content.</td>
500 </tr>
501 <tr>
502   <td>[iframe]URL[/iframe]</td>
503   <td>General embed, iframe size is limited by the theme size for video players.</td>
504 </tr>
505 <tr>
506   <td>[url]*url*[/url]</td>
507   <td>If *url* supports oembed or opengraph specifications the embedded object will be shown (eg, documents from scribd).
508 Page title with a link to *url* will be shown.</td>
509 </tr>
510 </table>
511
512 ## Map
513
514 This requires "openstreetmap" or "Google Maps" addon version 1.3 or newer.
515 If the addon isn't activated, the raw coordinates are shown instead.
516
517 <table class="bbcodes">
518 <tr>
519   <th>BBCode</th>
520   <th>Result</th>
521 </tr>
522 <tr>
523   <td>[map]address[/map]</td>
524   <td>Embeds a map centered on this address.</td>
525 </tr>
526 <tr>
527   <td>[map=lat,long]</td>
528   <td>Embeds a map centered on those coordinates.</td>
529 </tr>
530 <tr>
531   <td>[map]</td>
532   <td>Embeds a map centered on the post's location.</td>
533 </tr>
534 </table>
535
536 ## Abstract for longer posts
537
538 If you want to spread your post to several third party networks you may have the problem that these networks have a length limitation like on Twitter.
539
540 Friendica uses a semi-intelligent mechanism to generate a fitting abstract.
541 But it can be useful to define a custom abstract that will only be displayed on the external network.
542 This is done with the [abstract]-element.
543 <table class="bbcodes">
544 <tr>
545   <th>BBCode</th>
546   <th>Result</th>
547 </tr>
548 <tr>
549   <td>[abstract]Totally interesting! A must-see! Please click the link![/abstract]<br>
550 I want to tell you a really boring story that you really never wanted to hear.</td>
551   <td>Twitter would display the text <blockquote>Totally interesting! A must-see! Please click the link!</blockquote>
552 On Friendica you would only see the text after <blockquote>I want to tell you a really ...</blockquote></td>
553 </tr>
554 </table>
555
556 It is even possible to define abstracts for separate networks:
557
558 <table class="bbcodes">
559 <tr>
560   <th>BBCode</th>
561   <th>Result</th>
562 </tr>
563 <tr>
564   <td>
565 [abstract]Hi friends Here are my newest pictures![/abstract]<br>
566 [abstract=twit]Hi my dear Twitter followers. Do you want to see my new
567 pictures?[/abstract]<br>
568 [abstract=apdn]Helly my dear followers on ADN. I made sone new pictures
569 that I wanted to share with you.[/abstract]<br>
570 Today I was in the woods and took some real cool pictures ...</td>
571   <td>For Twitter and App.net the system will use the defined abstracts.<br>
572 For other networks (e.g. when you are using the "statusnet" connector that is used to post to your GNU Social account) the general abstract element will be used.</td>
573 </tr>
574 </table>
575
576 If you use (for example) the "buffer" connector to post to Facebook or Google+ you can use this element to define an abstract for a longer blogpost that you don't want to post completely to these networks.
577
578 Networks like Facebook or Google+ aren't length limited.
579 For this reason the [abstract] element isn't used.
580 Instead you have to name the explicit network:
581
582 <table class="bbcodes">
583 <tr>
584   <th>BBCode</th>
585   <th>Result</th>
586 </tr>
587 <tr>
588   <td>
589 [abstract]These days I had a strange encounter...[/abstract]<br>
590 [abstract=goog]Hello my dear Google+ followers. You have to read my newest blog post![/abstract]<br>
591 [abstract=face]Hello my Facebook friends. These days happened something really cool.[/abstract]<br>
592 While taking pictures in the woods I had a really strange encounter...</td>
593   <td>Google and Facebook will show the respective abstracts while the other networks will show the default one.<br>
594 <br>Meanwhile, Friendica won't show any of the abstracts.</td>
595 </tr>
596 </table>
597
598 The [abstract] element is not working with connectors where we post HTML directly, like Tumblr, Wordpress or Pump.io.
599 For the native connections--that is to e.g. Friendica, Hubzilla, Diaspora or GNU Social--the full posting is used and the contacts instance will display the posting as desired.
600
601 ## Special
602
603 <table class="bbcodes">
604 <tr>
605   <th>BBCode</th>
606   <th>Result</th>
607 </tr>
608 <tr>
609   <td>If you need to put literal bbcode in a message, [noparse], [nobb] or [pre] are used to escape bbcode:
610     <ul>
611       <li>[noparse][b]bold[/b][/noparse]</li>
612       <li>[nobb][b]bold[/b][/nobb]</li>
613       <li>[pre][b]bold[/b][/pre]</li>
614     </ul>
615   </td>
616   <td>[b]bold[/b]</td>
617 </tr>
618 <tr>
619   <td>[nosmile] is used to disable smilies on a post by post basis<br>
620     <br>
621     [nosmile] ;-) :-O
622   </td>
623   <td>;-) :-O</td>
624 </tr>
625 <tr>
626   <td>Custom inline styles<br>
627 <br>
628 [style=text-shadow: 0 0 4px #CC0000;]You can change all the CSS properties of this block.[/style]</td>
629   <td><span style="text-shadow: 0 0 4px #cc0000;;">You can change all the CSS properties of this block.</span></td>
630 </tr>
631 <tr>
632   <td>Custom class block<br>
633 <br>
634 [class=custom]If the class exists, this block will have the custom class style applied.[/class]</td>
635   <td><pre>&lt;span class="custom"&gt;If the class exists,<br> this block will have the custom class<br> style applied.&lt;/span&gt;</pre></td>
636 </tr>
637 </table>