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