Merge pull request #2882 from Hypolite/improvement/bbcode-documentation
BBCodes documentation improvement
This commit is contained in:
rabuzarus
GitHub
commit
75166cae27
5 changed files with 618 additions and 196 deletions
739
doc/BBCode.md
739
doc/BBCode.md
|
|
@ -1,208 +1,611 @@
|
|||
Friendica BBCode tags reference
|
||||
========================
|
||||
|
||||
* [Home](help)
|
||||
* [Creating posts](help/Text_editor)
|
||||
|
||||
Inline
|
||||
-----
|
||||
## Inline
|
||||
|
||||
<style>
|
||||
table.bbcodes {
|
||||
margin: 1em 0;
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #aaa;
|
||||
border-collapse: collapse;
|
||||
color: #000;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
<pre>[b]bold[/b]</pre> : <strong>bold</strong>
|
||||
table.bbcodes > tr > th,
|
||||
table.bbcodes > tr > td,
|
||||
table.bbcodes > * > tr > th,
|
||||
table.bbcodes > * > tr > td {
|
||||
border: 1px solid #aaa;
|
||||
padding: 0.2em 0.4em
|
||||
}
|
||||
|
||||
<pre>[i]italic[/i]</pre> : <em>italic</em>
|
||||
table.bbcodes > tr > th,
|
||||
table.bbcodes > * > tr > th {
|
||||
background-color: #f2f2f2;
|
||||
text-align: center
|
||||
}
|
||||
</style>
|
||||
|
||||
<pre>[u]underlined[/u]</pre> : <u>underlined</u>
|
||||
<table class="bbcodes">
|
||||
<tr>
|
||||
<th>BBCode</th>
|
||||
<th>Result</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[b]bold[/b]</td>
|
||||
<td><strong>bold</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[i]italic[/i]</td>
|
||||
<td><em>italic</em></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[u]underlined[/u]</td>
|
||||
<td><u>underlined</u></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[s]strike[/s]</td>
|
||||
<td><strike>strike</strike></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[o]overline[/o]</td>
|
||||
<td><span class="overline">overline</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[color=red]red[/color]</td>
|
||||
<td><span style="color: red;">red</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[url=http://www.friendica.com]Friendica[/url]</td>
|
||||
<td><a href="http://www.friendica.com" target="external-link">Friendica</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[img]http://friendica.com/sites/default/files/friendika-32.png[/img]</td>
|
||||
<td><img src="http://friendica.com/sites/default/files/friendika-32.png" alt="Immagine/foto"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[img=64x32]http://friendica.com/sites/default/files/friendika-32.png[/img]<br>
|
||||
<br>Note: provided height is simply discarded.</td>
|
||||
<td><img src="http://friendica.com/sites/default/files/friendika-32.png" style="width: 64px;"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[size=xx-small]small text[/size]</td>
|
||||
<td><span style="font-size: xx-small;">small text</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[size=xx-large]big text[/size]</td>
|
||||
<td><span style="font-size: xx-large;">big text</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[size=20]exact size[/size] (size can be any number, in pixel)</td>
|
||||
<td><span style="font-size: 20px;">exact size</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[font=serif]Serif font[/font]</td>
|
||||
<td><span style="font-family: serif;">Serif font</span></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<pre>[s]strike[/s]</pre> : <strike>strike</strike>
|
||||
### Links
|
||||
|
||||
<pre>[color=red]red[/color]</pre> : <span style="color: red;">red</span>
|
||||
<table class="bbcodes">
|
||||
<tr>
|
||||
<th>BBCode</th>
|
||||
<th>Result</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[url]http://friendica.com[/url]</td>
|
||||
<td><a href="http://friendica.com">http://friendica.com</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[url=http://friendica.com]Friendica[/url]</td>
|
||||
<td><a href="http://friendica.com">Friendica</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[bookmark]http://friendica.com[/bookmark]<br><br>
|
||||
#^[url]http://friendica.com[/url]</td>
|
||||
<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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[bookmark=http://friendica.com]Bookmark[/bookmark]<br><br>
|
||||
#^[url=http://friendica.com]Bookmark[/url]<br><br>
|
||||
#[url=http://friendica.com]^[/url][url=http://friendica.com]Bookmark[/url]</td>
|
||||
<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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[url=/posts/f16d77b0630f0134740c0cc47a0ea02a]Diaspora post with GUID[/url]</td>
|
||||
<td><a href="/display/f16d77b0630f0134740c0cc47a0ea02a" target="_blank">Diaspora post with GUID</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>#Friendica</td>
|
||||
<td>#<a href="/search?tag=Friendica">Friendica</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>@Mention</td>
|
||||
<td>@<a href="javascript:void(0)">Mention</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>acct:account@friendica.host.com (WebFinger)</td>
|
||||
<td><a href="/acctlink?addr=account@friendica.host.com" target="extlink">acct:account@friendica.host.com</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[mail]user@mail.example.com[/mail]</td>
|
||||
<td><a href="mailto:user@mail.example.com">user@mail.example.com</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[mail=user@mail.example.com]Send an email to User[/mail]</td>
|
||||
<td><a href="mailto:user@mail.example.com">Send an email to User</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<pre>[url=http://www.friendica.com]Friendica[/url]</pre> : <a href="http://www.friendica.com" target="external-link">Friendica</a>
|
||||
## Blocks
|
||||
|
||||
<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">
|
||||
<table class="bbcodes">
|
||||
<tr>
|
||||
<th>BBCode</th>
|
||||
<th>Result</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[p]A paragraph of text[/p]</td>
|
||||
<td><p>A paragraph of text</p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Inline [code]code[/code] in a paragraph</td>
|
||||
<td>Inline <key>code</key> in a paragraph</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[code]Multi<br>line<br>code[/code]</td>
|
||||
<td><code>Multi
|
||||
line
|
||||
code</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[code=php]function text_highlight($s,$lang)[/code]</td>
|
||||
<td><code><div class="hl-main"><ol class="hl-main"><li><span class="hl-code"> </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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[quote]quote[/quote]</td>
|
||||
<td><blockquote>quote</blockquote></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[quote=Author]Author? Me? No, no, no...[/quote]</td>
|
||||
<td><strong class="author">Author wrote:</strong><blockquote>Author? Me? No, no, no...</blockquote></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[center]Centered text[/center]</td>
|
||||
<td><div style="text-align:center;">Centered text</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>You should not read any further if you want to be surprised.[spoiler]There is a happy end.[/spoiler]</td>
|
||||
<td>
|
||||
<div class="wall-item-container">
|
||||
You should not read any further if you want to be surprised.<br>
|
||||
<span id="spoiler-wrap-0716e642" class="spoiler-wrap fakelink" onclick="openClose('spoiler-0716e642');">Click to open/close</span>
|
||||
<blockquote class="spoiler" id="spoiler-0716e642" style="display: none;">There is a happy end.</blockquote>
|
||||
<div class="body-attach"><div class="clear"></div></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[spoiler=Author]Spoiler quote[/spoiler]</td>
|
||||
<td>
|
||||
<div class="wall-item-container">
|
||||
<strong class="spoiler">Author wrote:</strong><br>
|
||||
<span id="spoiler-wrap-a893765a" class="spoiler-wrap fakelink" onclick="openClose('spoiler-a893765a');">Click to open/close</span>
|
||||
<blockquote class="spoiler" id="spoiler-a893765a" style="display: none;">Spoiler quote</blockquote>
|
||||
<div class="body-attach"><div class="clear"></div></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[hr] (horizontal line)</td>
|
||||
<td><hr></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<pre>[size=xx-small]small text[/size]</pre> : <span style="font-size: xx-small;">small text</span>
|
||||
### Titles
|
||||
|
||||
<pre>[size=xx-large]big text[/size]</pre> : <span style="font-size: xx-large;">big text</span>
|
||||
<table class="bbcodes">
|
||||
<tr>
|
||||
<th>BBCode</th>
|
||||
<th>Result</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[h1]Title 1[/h1]</td>
|
||||
<td><h1>Title 1</h1></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[h2]Title 2[/h2]</td>
|
||||
<td><h2>Title 2</h2></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[h3]Title 3[/h3]</td>
|
||||
<td><h3>Title 3</h3></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[h4]Title 4[/h4]</td>
|
||||
<td><h4>Title 4</h4></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[h5]Title 5[/h5]</td>
|
||||
<td><h5>Title 5</h5></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[h6]Title 6[/h6]</td>
|
||||
<td><h6>Title 6</h6></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<pre>[size=20]exact size[/size] (size can be any number, in pixel)</pre> : <span style="font-size: 20px;">exact size</span>
|
||||
### Tables
|
||||
|
||||
<table class="bbcodes">
|
||||
<tr>
|
||||
<th>BBCode</th>
|
||||
<th>Result</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[table]<br>
|
||||
[tr]<br>
|
||||
[th]Header 1[/th]<br>
|
||||
[th]Header 2[/th]<br>
|
||||
[th]Header 2[/th]<br>
|
||||
[/tr]<br>
|
||||
[tr]<br>
|
||||
[td]Cell 1[/td]<br>
|
||||
[td]Cell 2[/td]<br>
|
||||
[td]Cell 3[/td]<br>
|
||||
[/tr]<br>
|
||||
[tr]<br>
|
||||
[td]Cell 4[/td]<br>
|
||||
[td]Cell 5[/td]<br>
|
||||
[td]Cell 6[/td]<br>
|
||||
[/tr]<br>
|
||||
[/table]</td>
|
||||
<td>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Header 1</th>
|
||||
<th>Header 2</th>
|
||||
<th>Header 3</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cell 1</td>
|
||||
<td>Cell 2</td>
|
||||
<td>Cell 3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cell 4</td>
|
||||
<td>Cell 5</td>
|
||||
<td>Cell 6</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[table border=0]</td>
|
||||
<td>
|
||||
<table border="0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Header 1</th>
|
||||
<th>Header 2</th>
|
||||
<th>Header 3</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cell 1</td>
|
||||
<td>Cell 2</td>
|
||||
<td>Cell 3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cell 4</td>
|
||||
<td>Cell 5</td>
|
||||
<td>Cell 6</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[table border=1]</td>
|
||||
<td>
|
||||
<table border="1">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Header 1</th>
|
||||
<th>Header 2</th>
|
||||
<th>Header 3</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cell 1</td>
|
||||
<td>Cell 2</td>
|
||||
<td>Cell 3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cell 4</td>
|
||||
<td>Cell 5</td>
|
||||
<td>Cell 6</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
### Lists
|
||||
|
||||
<table class="bbcodes">
|
||||
<tr>
|
||||
<th>BBCode</th>
|
||||
<th>Result</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[ul]<br>
|
||||
[li] First list element<br>
|
||||
[li] Second list element<br>
|
||||
[/ul]<br>
|
||||
[list]<br>
|
||||
[*] First list element<br>
|
||||
[*] Second list element<br>
|
||||
[/list]</td>
|
||||
<td>
|
||||
<ul class="listbullet" style="list-style-type: circle;">
|
||||
<li>First list element</li>
|
||||
<li>Second list element</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[ol]<br>
|
||||
[*] First list element<br>
|
||||
[*] Second list element<br>
|
||||
[/ol]<br>
|
||||
[list=1]<br>
|
||||
[*] First list element<br>
|
||||
[*] Second list element<br>
|
||||
[/list]</td>
|
||||
<td>
|
||||
<ul class="listdecimal" style="list-style-type: decimal;">
|
||||
<li> First list element</li>
|
||||
<li> Second list element</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[list=]<br>
|
||||
[*] First list element<br>
|
||||
[*] Second list element<br>
|
||||
[/list]</td>
|
||||
<td>
|
||||
<ul class="listnone" style="list-style-type: none;">
|
||||
<li> First list element</li>
|
||||
<li> Second list element</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[list=i]<br>
|
||||
[*] First list element<br>
|
||||
[*] Second list element<br>
|
||||
[/list]</td>
|
||||
<td>
|
||||
<ul class="listlowerroman" style="list-style-type: lower-roman;">
|
||||
<li> First list element</li>
|
||||
<li> Second list element</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[list=I]<br>
|
||||
[*] First list element<br>
|
||||
[*] Second list element<br>
|
||||
[/list]</td>
|
||||
<td>
|
||||
<ul class="listupperroman" style="list-style-type: upper-roman;">
|
||||
<li> First list element</li>
|
||||
<li> Second list element</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[list=a]<br>
|
||||
[*] First list element<br>
|
||||
[*] Second list element<br>
|
||||
[/list]</td>
|
||||
<td>
|
||||
<ul class="listloweralpha" style="list-style-type: lower-alpha;">
|
||||
<li> First list element</li>
|
||||
<li> Second list element</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[list=A]<br>
|
||||
[*] First list element<br>
|
||||
[*] Second list element<br>
|
||||
[/list]</td>
|
||||
<td>
|
||||
<ul class="listupperalpha" style="list-style-type: upper-alpha;">
|
||||
<li> First list element</li>
|
||||
<li> Second list element</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
|
||||
Block
|
||||
-----
|
||||
|
||||
<pre>[code]code[/code]</pre>
|
||||
|
||||
<code>code</code>
|
||||
|
||||
<p style="clear:both;"> </p>
|
||||
|
||||
<pre>[code=php]function text_highlight($s,$lang)[/code]</pre>
|
||||
|
||||
<code><div class="hl-main"><ol class="hl-main"><li><span class="hl-code"> </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>
|
||||
|
||||
<p style="clear:both;"> </p>
|
||||
|
||||
<pre>[quote]quote[/quote]</pre>
|
||||
|
||||
<blockquote>quote</blockquote>
|
||||
|
||||
<p style="clear:both;"> </p>
|
||||
|
||||
<pre>[quote=Author]Author? Me? No, no, no...[/quote]</pre>
|
||||
|
||||
<strong class="author">Author wrote:</strong><blockquote>Author? Me? No, no, no...</blockquote>
|
||||
|
||||
<p style="clear:both;"> </p>
|
||||
|
||||
<pre>[center]centered text[/center]</pre>
|
||||
|
||||
<div style="text-align:center;">centered text</div>
|
||||
|
||||
<p style="clear:both;"> </p>
|
||||
|
||||
<pre>You should not read any further if you want to be surprised.[spoiler]There is a happy end.[/spoiler]</pre>
|
||||
|
||||
You should not read any further if you want to be surprised.<br />*click to open/close*
|
||||
|
||||
(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.)
|
||||
|
||||
<p style="clear:both;"> </p>
|
||||
|
||||
**Table**
|
||||
<pre>[table border=1]
|
||||
[tr]
|
||||
[th]Tables now[/th]
|
||||
[/tr]
|
||||
[tr]
|
||||
[td]Have headers[/td]
|
||||
[/tr]
|
||||
[/table]</pre>
|
||||
|
||||
<table border="1"><tbody><tr><th>Tables now</th></tr><tr><td>Have headers</td></tr></tbody></table>
|
||||
|
||||
<p style="clear:both;"> </p>
|
||||
|
||||
**List**
|
||||
|
||||
<pre>[list]
|
||||
[*] First list element
|
||||
[*] Second list element
|
||||
[/list]</pre>
|
||||
<ul class="listbullet" style="list-style-type: circle;">
|
||||
<li> First list element<br>
|
||||
</li>
|
||||
<li> Second list element</li>
|
||||
</ul>
|
||||
|
||||
[list] is equivalent to [ul] (unordered list).
|
||||
|
||||
[ol] can be used instead of [list] to show an ordered list:
|
||||
|
||||
<pre>[ol]
|
||||
[*] First list element
|
||||
[*] Second list element
|
||||
[/ol]</pre>
|
||||
<ul class="listdecimal" style="list-style-type: decimal;"><li> First list element<br></li><li> Second list element</li></ul>
|
||||
|
||||
For more options on ordered lists, you can define the style of numeration on [list] argument:
|
||||
<pre>[list=1]</pre> : decimal
|
||||
|
||||
<pre>[list=i]</pre> : lover case roman
|
||||
|
||||
<pre>[list=I]</pre> : upper case roman
|
||||
|
||||
<pre>[list=a]</pre> : lover case alphabetic
|
||||
|
||||
<pre>[list=A] </pre> : upper case alphabetic
|
||||
|
||||
|
||||
|
||||
|
||||
Embed
|
||||
------
|
||||
## Embed
|
||||
|
||||
You can embed video, audio and more in a message.
|
||||
|
||||
<pre>[video]url[/video]</pre>
|
||||
<pre>[audio]url[/audio]</pre>
|
||||
<table class="bbcodes">
|
||||
<tr>
|
||||
<th>BBCode</th>
|
||||
<th>Result</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[video]url[/video]</td>
|
||||
<td>Where *url* can be an url to youtube, vimeo, soundcloud, or other sites wich supports oembed or opengraph specifications.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[video]Video file url[/video]
|
||||
[audio]Audio file url[/audio]</td>
|
||||
<td>Full URL to an ogg/ogv/oga/ogm/webm/mp4/mp3 file. An HTML5 player will be used to show it.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[youtube]Youtube URL[/youtube]</td>
|
||||
<td>Youtube video OEmbed display. May not embed an actual player.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[youtube]Youtube video ID[/youtube]</td>
|
||||
<td>Youtube player iframe embed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[vimeo]Vimeo URL[/vimeo]</td>
|
||||
<td>Vimeo video OEmbed display. May not embed an actual player.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[vimeo]Vimeo video ID[/vimeo]</td>
|
||||
<td>Vimeo player iframe embed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[iframe]URL[/iframe]</td>
|
||||
<td>General embed, iframe size is limited by the theme size for video players.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[url]*url*[/url]</td>
|
||||
<td>If *url* supports oembed or opengraph specifications the embedded object will be shown (eg, documents from scribd).
|
||||
Page title with a link to *url* will be shown.</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
Where *url* can be an url to youtube, vimeo, soundcloud, or other sites wich supports oembed or opengraph specifications.
|
||||
*url* can be also full url to an ogg file. HTML5 tag will be used to show it.
|
||||
## Map
|
||||
|
||||
<pre>[url]*url*[/url]</pre>
|
||||
This require "openstreetmap" addon version 1.3 or newer. If the addon isn't activated,
|
||||
the raw coordinates are shown instead.
|
||||
|
||||
If *url* supports oembed or opengraph specifications the embedded object will be shown (eg, documents from scribd).
|
||||
Page title with a link to *url* will be shown.
|
||||
<table class="bbcodes">
|
||||
<tr>
|
||||
<th>BBCode</th>
|
||||
<th>Result</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[map]address[/map]</td>
|
||||
<td>Embeds a map centered on this address.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[map=lat,long]</td>
|
||||
<td>Embeds a map centered on those coordinates.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[map]</td>
|
||||
<td>Embeds a map centered on the post's location.</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
Map
|
||||
---
|
||||
## Abstract for longer posts
|
||||
|
||||
<pre>[map]address[/map]</pre>
|
||||
<pre>[map=lat,long]</pre>
|
||||
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.
|
||||
|
||||
You can embed maps from coordinates or addresses.
|
||||
This require "openstreetmap" addon version 1.3 or newer.
|
||||
|
||||
-----------------------------------------------------------
|
||||
|
||||
Abstract for longer posts
|
||||
-------------------------
|
||||
|
||||
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.
|
||||
(Like on Twitter)
|
||||
|
||||
Friendica is using a semi intelligent mechanism to generate a fitting abstract.
|
||||
But it can be interesting to define an own abstract that will only be displayed on the external network.
|
||||
This is done with the [abstract]-element.
|
||||
Example:
|
||||
|
||||
<pre>[abstract]Totally interesting! A must-see! Please click the link![/abstract]
|
||||
I want to tell you a really boring story that you really never wanted
|
||||
to hear.</pre>
|
||||
|
||||
Twitter would display the text "Totally interesting! A must-see! Please click the link!".
|
||||
On Friendica you would only see the text after "I want to tell you a really ..."
|
||||
Friendica is using a semi intelligent mechanism to generate a fitting abstract.
|
||||
But it can be interesting to define a custom abstract that will only be displayed on the external network.
|
||||
This is done with the [abstract]-element.
|
||||
<table class="bbcodes">
|
||||
<tr>
|
||||
<th>BBCode</th>
|
||||
<th>Result</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[abstract]Totally interesting! A must-see! Please click the link![/abstract]<br>
|
||||
I want to tell you a really boring story that you really never wanted to hear.</td>
|
||||
<td>Twitter would display the text "Totally interesting! A must-see! Please click the link!".
|
||||
On Friendica you would only see the text after "I want to tell you a really ..."</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
It is even possible to define abstracts for separate networks:
|
||||
|
||||
<pre>
|
||||
[abstract]Hi friends Here are my newest pictures![abstract]
|
||||
[abstract=twit]Hi my dear Twitter followers. Do you want to see my new
|
||||
pictures?[abstract]
|
||||
[abstract=apdn]Helly my dear followers on ADN. I made sone new pictures
|
||||
that I wanted to share with you.[abstract]
|
||||
Today I was in the woods and took some real cool pictures ...
|
||||
</pre>
|
||||
|
||||
For Twitter and App.net the system will use the defined abstracts.
|
||||
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.
|
||||
<table class="bbcodes">
|
||||
<tr>
|
||||
<th>BBCode</th>
|
||||
<th>Result</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
[abstract]Hi friends Here are my newest pictures![/abstract]<br>
|
||||
[abstract=twit]Hi my dear Twitter followers. Do you want to see my new
|
||||
pictures?[/abstract]<br>
|
||||
[abstract=apdn]Helly my dear followers on ADN. I made sone new pictures
|
||||
that I wanted to share with you.[/abstract]<br>
|
||||
Today I was in the woods and took some real cool pictures ...</td>
|
||||
<td>For Twitter and App.net the system will use the defined abstracts.<br>
|
||||
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>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
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.
|
||||
|
||||
Networks like Facebook or Google+ aren't length limited.
|
||||
For this reason the [abstract] element isn't used.
|
||||
Networks like Facebook or Google+ aren't length limited.
|
||||
For this reason the [abstract] element isn't used.
|
||||
Instead you have to name the explicit network:
|
||||
|
||||
<pre>
|
||||
[abstract]These days I had a strange encounter ...[abstract]
|
||||
[abstract=goog]Helly my dear Google+ followers. You have to read my
|
||||
newest blog post![abstract]
|
||||
[abstract=face]Hello my Facebook friends. These days happened something
|
||||
really cool.[abstract]
|
||||
While taking pictures in the woods I had a really strange encounter ... </pre>
|
||||
<table class="bbcodes">
|
||||
<tr>
|
||||
<th>BBCode</th>
|
||||
<th>Result</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
[abstract]These days I had a strange encounter...[/abstract]<br>
|
||||
[abstract=goog]Helly my dear Google+ followers. You have to read my newest blog post![/abstract]<br>
|
||||
[abstract=face]Hello my Facebook friends. These days happened something really cool.[/abstract]<br>
|
||||
While taking pictures in the woods I had a really strange encounter...</td>
|
||||
<td>Google and Facebook will show the respective abstracts while the other networks will show the default one.<br>
|
||||
<br>Meanwhile, Friendica won't show any of the abstracts.</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
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)
|
||||
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.
|
||||
|
||||
Special
|
||||
-------
|
||||
## Special
|
||||
|
||||
If you need to put literal bbcode in a message, [noparse], [nobb] or [pre] are used to escape bbcode:
|
||||
<table class="bbcodes">
|
||||
<tr>
|
||||
<th>BBCode</th>
|
||||
<th>Result</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>If you need to put literal bbcode in a message, [noparse], [nobb] or [pre] are used to escape bbcode:<br>
|
||||
<ul>
|
||||
<li>[noparse][b]bold[/b][/noparse]</li>
|
||||
<li>[nobb][b]bold[/b][/nobb]</li>
|
||||
<li>[pre][b]bold[/b][/pre]</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>[b]bold[/b]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[nosmile] is used to disable smilies on a post by post basis<br>
|
||||
<br>
|
||||
[nosmile] ;-) :-O
|
||||
</td>
|
||||
<td>;-) :-O</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Custom inline styles<br>
|
||||
<br>
|
||||
[style=text-shadow: 0 0 4px #CC0000;]You can change all the CSS properties of this block.[/style]</td>
|
||||
<td><span style="text-shadow: 0 0 4px #cc0000;;">You can change all the CSS properties of this block.</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Custom class block<br>
|
||||
<br>
|
||||
[class=custom]If the class exists, this block will have the custom class style applied.[/class]</td>
|
||||
<td><pre><span class="custom">If the class exists,<br> this block will have the custom class<br> style applied.</span></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<pre>[noparse][b]bold[/b][/noparse]</pre> : [b]bold[/b]
|
||||
|
|
|
|||
|
|
@ -146,7 +146,7 @@ function cleancss($input) {
|
|||
if (($char >= "a") and ($char <= "z"))
|
||||
$cleaned .= $char;
|
||||
|
||||
if (!(strpos(" #;:0123456789-_", $char) === false))
|
||||
if (!(strpos(" #;:0123456789-_.%", $char) === false))
|
||||
$cleaned .= $char;
|
||||
}
|
||||
|
||||
|
|
@ -892,8 +892,7 @@ function bbcode($Text,$preserve_nl = false, $tryoembed = true, $simplehtml = fal
|
|||
// we may need to restrict this further if it picks up too many strays
|
||||
// link acct:user@host to a webfinger profile redirector
|
||||
|
||||
$Text = preg_replace('/acct:(.*?)@(.*?)([ ,])/', '<a href="' . $a->get_baseurl() . '/acctlink?addr=' . "$1@$2"
|
||||
. '" target="extlink" >acct:' . "$1@$2$3" . '</a>',$Text);
|
||||
$Text = preg_replace('/acct:([^@]+)@((?!\-)(?:[a-zA-Z\d\-]{0,62}[a-zA-Z\d]\.){1,126}(?!\d+)[a-zA-Z\d]{1,63})/', '<a href="' . $a->get_baseurl() . '/acctlink?addr=$1@$2" target="extlink">acct:$1@$2</a>',$Text);
|
||||
|
||||
// Perform MAIL Search
|
||||
$Text = preg_replace("/\[mail\]([$MAILSearchString]*)\[\/mail\]/", '<a href="mailto:$1">$1</a>', $Text);
|
||||
|
|
|
|||
|
|
@ -769,71 +769,75 @@ function activity_match($haystack,$needle) {
|
|||
}}
|
||||
|
||||
|
||||
if(! function_exists('get_tags')) {
|
||||
/**
|
||||
* Pull out all #hashtags and @person tags from $s;
|
||||
* @brief Pull out all #hashtags and @person tags from $string.
|
||||
*
|
||||
* We also get @person@domain.com - which would make
|
||||
* the regex quite complicated as tags can also
|
||||
* end a sentence. So we'll run through our results
|
||||
* and strip the period from any tags which end with one.
|
||||
* Returns array of tags found, or empty array.
|
||||
*
|
||||
* @param string $s
|
||||
* @return array
|
||||
* @param string $string Post content
|
||||
* @return array List of tag and person names
|
||||
*/
|
||||
function get_tags($s) {
|
||||
function get_tags($string) {
|
||||
$ret = array();
|
||||
|
||||
// Convert hashtag links to hashtags
|
||||
$s = preg_replace("/#\[url\=([^\[\]]*)\](.*?)\[\/url\]/ism", "#$2", $s);
|
||||
$string = preg_replace('/#\[url\=([^\[\]]*)\](.*?)\[\/url\]/ism', '#$2', $string);
|
||||
|
||||
// ignore anything in a code block
|
||||
$s = preg_replace('/\[code\](.*?)\[\/code\]/sm','',$s);
|
||||
$string = preg_replace('/\[code\](.*?)\[\/code\]/sm', '', $string);
|
||||
|
||||
// Force line feeds at bbtags
|
||||
$s = str_replace(array("[", "]"), array("\n[", "]\n"), $s);
|
||||
$string = str_replace(array('[', ']'), array("\n[", "]\n"), $string);
|
||||
|
||||
// ignore anything in a bbtag
|
||||
$s = preg_replace('/\[(.*?)\]/sm','',$s);
|
||||
$string = preg_replace('/\[(.*?)\]/sm', '', $string);
|
||||
|
||||
// Match full names against @tags including the space between first and last
|
||||
// We will look these up afterward to see if they are full names or not recognisable.
|
||||
|
||||
if(preg_match_all('/(@[^ \x0D\x0A,:?]+ [^ \x0D\x0A@,:?]+)([ \x0D\x0A@,:?]|$)/',$s,$match)) {
|
||||
foreach($match[1] as $mtch) {
|
||||
if(strstr($mtch,"]")) {
|
||||
if (preg_match_all('/(@[^ \x0D\x0A,:?]+ [^ \x0D\x0A@,:?]+)([ \x0D\x0A@,:?]|$)/', $string, $matches)) {
|
||||
foreach ($matches[1] as $match) {
|
||||
if (strstr($match, ']')) {
|
||||
// we might be inside a bbcode color tag - leave it alone
|
||||
continue;
|
||||
}
|
||||
if(substr($mtch,-1,1) === '.')
|
||||
$ret[] = substr($mtch,0,-1);
|
||||
else
|
||||
$ret[] = $mtch;
|
||||
if (substr($match, -1, 1) === '.') {
|
||||
$ret[] = substr($match, 0, -1);
|
||||
} else {
|
||||
$ret[] = $match;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Otherwise pull out single word tags. These can be @nickname, @first_last
|
||||
// and #hash tags.
|
||||
|
||||
if(preg_match_all('/([!#@][^ \x0D\x0A,;:?]+)([ \x0D\x0A,;:?]|$)/',$s,$match)) {
|
||||
foreach($match[1] as $mtch) {
|
||||
if(strstr($mtch,"]")) {
|
||||
if (preg_match_all('/([!#@][^\^ \x0D\x0A,;:?]+)([ \x0D\x0A,;:?]|$)/', $string, $matches)) {
|
||||
foreach($matches[1] as $match) {
|
||||
if (strstr($match, ']')) {
|
||||
// we might be inside a bbcode color tag - leave it alone
|
||||
continue;
|
||||
}
|
||||
if(substr($mtch,-1,1) === '.')
|
||||
$mtch = substr($mtch,0,-1);
|
||||
if (substr($match, -1, 1) === '.') {
|
||||
$match = substr($match,0,-1);
|
||||
}
|
||||
// ignore strictly numeric tags like #1
|
||||
if((strpos($mtch,'#') === 0) && ctype_digit(substr($mtch,1)))
|
||||
if ((strpos($match, '#') === 0) && ctype_digit(substr($match, 1))) {
|
||||
continue;
|
||||
}
|
||||
// try not to catch url fragments
|
||||
if(strpos($s,$mtch) && preg_match('/[a-zA-z0-9\/]/',substr($s,strpos($s,$mtch)-1,1)))
|
||||
if (strpos($string, $match) && preg_match('/[a-zA-z0-9\/]/', substr($string, strpos($string, $match) - 1, 1))) {
|
||||
continue;
|
||||
$ret[] = $mtch;
|
||||
}
|
||||
$ret[] = $match;
|
||||
}
|
||||
}
|
||||
return $ret;
|
||||
}}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
|
|
|
|||
|
|
@ -27,6 +27,10 @@ a.btn, a.btn:hover {
|
|||
background-color: #2d2d2d;
|
||||
}
|
||||
|
||||
.overline {
|
||||
text-decoration: overline;
|
||||
}
|
||||
|
||||
/* List of social Networks */
|
||||
img.connector, img.connector-disabled {
|
||||
height: 40px;
|
||||
|
|
|
|||
|
|
@ -38,6 +38,18 @@ body a {
|
|||
color: $link_color;
|
||||
text-decoration: none;
|
||||
}
|
||||
/* Anchors incorrectly display with a fixed top menu. This global rule offsets all
|
||||
* anchors so that accessing them with a # link will actually scroll the associated
|
||||
* content in the visible part of the page.
|
||||
*
|
||||
* anchor.top should be the opposite of body.padding-top
|
||||
*/
|
||||
body a[name]:not([href]) {
|
||||
display: block;
|
||||
position: relative;
|
||||
top: -110px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
body a:hover, body a:focus, body a:active, body a.active, body .btn-link:hover{
|
||||
/*color: #59d6e4;*/
|
||||
|
|
|
|||
Loading…
Reference in a new issue