doc/BBCode.md

   1 Friendica BBCode tags reference
   2 ========================
   3
   4 * [Home](help)
   5
   6 Inline
   7 -----
   8
   9
  10 <pre>[b]bold[/b]</pre> : <strong>bold</strong>
  11
  12 <pre>[i]italic[/i]</pre> : <em>italic</em>
  13
  14 <pre>[u]underlined[/u]</pre> : <u>underlined</u>
  15
  16 <pre>[s]strike[/s]</pre> : <strike>strike</strike>
  17
  18 <pre>[color=red]red[/color]</pre> : <span style="color:  red;">red</span>
  19
  20 <pre>[url=http://www.friendica.com]Friendica[/url]</pre> : <a href="http://www.friendica.com" target="external-link">Friendica</a>
  21
  22 <pre>[img]http://friendica.com/sites/default/files/friendika-32.png[/img]</pre> : <img src="http://friendica.com/sites/default/files/friendika-32.png" alt="Immagine/foto">
  23
  24 <pre>[size=xx-small]small text[/size]</pre> : <span style="font-size: xx-small;">small text</span>
  25
  26 <pre>[size=xx-large]big text[/size]</pre> : <span style="font-size: xx-large;">big text</span>
  27
  28 <pre>[size=20]exact size[/size] (size can be any number, in pixel)</pre> :  <span style="font-size: 20px;">exact size</span>
  29
  30
  31
  32
  33
  34
  35
  36 Block
  37 -----
  38
  39 <pre>[code]code[/code]</pre>
  40
  41 <code>code</code>
  42
  43 <p style="clear:both;">&nbsp;</p>
  44
  45 <pre>[code=php]function text_highlight($s,$lang)[/code]</pre>
  46
  47 <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>
  48
  49 <p style="clear:both;">&nbsp;</p>
  50
  51 <pre>[quote]quote[/quote]</pre>
  52
  53 <blockquote>quote</blockquote>
  54
  55 <p style="clear:both;">&nbsp;</p>
  56
  57 <pre>[quote=Author]Author? Me? No, no, no...[/quote]</pre>
  58
  59 <strong class="author">Author wrote:</strong><blockquote>Author? Me? No, no, no...</blockquote>
  60
  61 <p style="clear:both;">&nbsp;</p>
  62
  63 <pre>[center]centered text[/center]</pre>
  64
  65 <div style="text-align:center;">centered text</div>
  66
  67 <p style="clear:both;">&nbsp;</p>
  68
  69 <pre>You should not read any further if you want to be surprised.[spoiler]There is a happy end.[/spoiler]</pre>
  70
  71 You should not read any further if you want to be surprised.<br />*click to open/close*
  72
  73 (The text between thhe opening and the closing of the spoiler tag will be visible once the link is clicked. So *"There is a happy end."* wont be visible until the spoiler is uncovered.)
  74
  75 <p style="clear:both;">&nbsp;</p>
  76
  77 **Table**
  78 <pre>[table border=1]
  79  [tr]
  80    [th]Tables now[/th]
  81  [/tr]
  82  [tr]
  83    [td]Have headers[/td]
  84  [/tr]
  85 [/table]</pre>
  86
  87 <table border="1"><tbody><tr><th>Tables now</th></tr><tr><td>Have headers</td></tr></tbody></table>
  88
  89 <p style="clear:both;">&nbsp;</p>
  90
  91 **List**
  92
  93 <pre>[list]
  94  [*] First list element
  95  [*] Second list element
  96 [/list]</pre>
  97 <ul class="listbullet" style="list-style-type: circle;">
  98 <li> First list element<br>
  99 </li>
 100 <li> Second list element</li>
 101 </ul>
 102
 103 [list] is equivalent to [ul] (unordered list).
 104
 105 [ol] can be used instead of [list] to show an ordered list:
 106
 107 <pre>[ol]
 108  [*] First list element
 109  [*] Second list element
 110 [/ol]</pre>
 111 <ul class="listdecimal" style="list-style-type: decimal;"><li> First list element<br></li><li> Second list element</li></ul>
 112
 113 For more options on ordered lists, you can define the style of numeration on [list] argument:
 114 <pre>[list=1]</pre> : decimal
 115
 116 <pre>[list=i]</pre> : lover case roman
 117
 118 <pre>[list=I]</pre> : upper case roman
 119
 120 <pre>[list=a]</pre> : lover case alphabetic
 121
 122 <pre>[list=A] </pre> : upper case alphabetic
 123
 124
 125
 126
 127 Embed
 128 ------
 129
 130 You can embed video, audio and more in a message.
 131
 132 <pre>[video]url[/video]</pre>
 133 <pre>[audio]url[/audio]</pre>
 134
 135 Where *url* can be an url to youtube, vimeo, soundcloud, or other sites wich supports oembed or opengraph specifications.
 136 *url* can be also full url to an ogg  file. HTML5 tag will be used to show it.
 137
 138 <pre>[url]*url*[/url]</pre>
 139
 140 If *url* supports oembed or opengraph specifications the embedded object will be shown (eg, documents from scribd).
 141 Page title with a link to *url* will be shown.
 142
 143 Map
 144 ---
 145
 146 <pre>[map]address[/map]</pre>
 147 <pre>[map=lat,long]</pre>
 148
 149 You can embed maps from coordinates or addresses.
 150 This require "openstreetmap" addon version 1.3 or newer.
 151
 152 -----------------------------------------------------------
 153
 154 Abstract for longer posts
 155 -------------------------
 156
 157 If you want to spread your post to several third party networks you can have the problem that these networks have (for example) a length limitation.
 158 (Like on Twitter)
 159
 160 Friendica is using a semi intelligent mechanism to generate a fitting abstract.
 161 But it can be interesting to define an own abstract that will only be displayed on the external network.
 162 This is done with the [abstract]-element.
 163 Example:
 164
 165 <pre>[abstract]Totally interesting! A must-see! Please click the link![/abstract]
 166 I want to tell you a really boring story that you really never wanted
 167 to hear.</pre>
 168
 169 Twitter would display the text "Totally interesting! A must-see! Please click the link!".
 170 On Friendica you would only see the text after "I want to tell you a really ..."
 171
 172 It is even possible to define abstracts for separate networks:
 173
 174 <pre>
 175 [abstract]Hi friends Here are my newest pictures![abstract]
 176 [abstract=twit]Hi my dear Twitter followers. Do you want to see my new
 177 pictures?[abstract]
 178 [abstract=apdn]Helly my dear followers on ADN. I made sone new pictures
 179 that I wanted to share with you.[abstract]
 180 Today I was in the woods and took some real cool pictures ...
 181 </pre>
 182
 183 For Twitter and App.net the system will use the defined abstracts.
 184 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.
 185
 186 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.
 187
 188 Networks like Facebook or Google+ aren't length limited.
 189 For this reason the [abstract] element isn't used.
 190 Instead you have to name the explicit network:
 191
 192 <pre>
 193 [abstract]These days I had a strange encounter ...[abstract]
 194 [abstract=goog]Helly my dear Google+ followers. You have to read my
 195 newest blog post![abstract]
 196 [abstract=face]Hello my Facebook friends. These days happened something
 197 really cool.[abstract]
 198 While taking pictures in the woods I had a really strange encounter ... </pre>
 199
 200 The [abstract] element isn't working with the native OStatus connection or with connectors where we post the HTML.
 201 (Like Tumblr, Wordpress or Pump.io)
 202
 203 Special
 204 -------
 205
 206 If you need to put literal bbcode in a message, [noparse], [nobb] or [pre] are used to escape bbcode:
 207
 208 <pre>[noparse][b]bold[/b][/noparse]</pre> : [b]bold[/b]