Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
docs:bbcode [2022-06-07 11:45] – [Links] Tobiasdocs:bbcode [2022-06-09 08:51] (current) – [Blocks] Tobias
Line 55: Line 55:
 ==== Blocks ==== ==== Blocks ====
  
-<table class="bbcodes"> +=== Paragraphs === 
-<tr> + 
-  <th>BBCode</th> +Usually, when you hit the ''ENTER'' key on your keyboard, Friendica will insert a line break in the display to reflect it. However if you wish to separate a new paragraph, you can also use the ''[p]'' BBCode tag, accompanied with a ''[/p]'' at the end of the paragraph. 
-  <th>Result</th> + 
-</tr> +=== Centered Text === 
-<tr> + 
-  <td>[p]A paragraph of text[/p]</td> +In Friendica you can center a text using the ''[center]This text is centered[/center]'' BBCode tag. 
-  <td><p>A paragraph of text</p></td> + 
-</tr> +=== Code Blocks === 
-<tr> + 
-  <td>Inline [code]code[/code] in a paragraph</td> +You can either use inline code or create a multi-line code block, both by using the BBCode ''[code]'' tag. If it is used on a single line surrounding your code (maybe even embedded within the text you are writing) the code will be displayed inline. 
-  <td>Inline <key>code</key> in a paragraph</td> + 
-</tr> +However if you put more then one line of code in the ''[code]'' tag, it will be visually separated from the rest of the code. In addition, on a multi-line code block you can specify the programming language used in the following code block. If the nodes admin has activated the [[https://git.friendi.ca/friendica/friendica-addons/src/branch/develop/highlightjs|hightlightjs addon]] this information will be used to apply the correct syntax highlighting. You can find a list of the supported programming languages on [[https://highlightjs.org/static/demo/|the used libraries homepage]]. 
-<tr> + 
-  <td>[code]Multi<br>line<br>code[/code]</td> +For example 
-  <td><code>Multi + 
-line +<code> 
-code</code></td> +Can somebody help me with the [code]hello_world()[/code] function in the [code]indroduction[/code] module? 
-</tr> +</code> 
-<tr> + 
-  <td>[code=php]function text_highlight($s,$lang)[/code]<sup><a href="#supported-code">1</a></sup></td> +will produce a posting like 
-  <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> + 
-</tr> +> Can somebody help me with the ''hello_world()'' function in the ''indroduction'' module? 
-<tr> + 
-  <td>[quote]quote[/quote]</td> +while something like 
-  <td><blockquote>quote</blockquote></td> + 
-</tr> +<code> 
-<tr> +Can somebody help me understand the following function from the [code]introduction[/code] module? 
-  <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> +[code=python] 
-</tr> +def hello_world(): 
-<tr> +  """ 
-  <td>[center]Centered text[/center]</td> +  A function to print "Hello World!" to the terminal. 
-  <td><div style="text-align:center;">Centered text</div></td> +  """ 
-</tr> +  print('Hello World!') 
-<tr> +[/code] 
-  <td>You should not read any further if you want to be surprised.[spoiler]There is a happy end.[/spoiler]</td> +</code> 
-  <td> + 
-    <div class="wall-item-container"> +will produce something like 
-      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> +> Can somebody help me understand the following function from the ''introduction'' module? 
-      <blockquote class="spoiler" id="spoiler-0716e642" style="display: none;">There is a happy end.</blockquote> +> 
-      <div class="body-attach"><div class="clear"></div></div> +> <code=python> 
-    </div> +def hello_world(): 
-  </td> +  """ 
-</tr> +  A function to print "Hello World!" to the terminal. 
-<tr> +  """ 
-  <td>[spoiler=Author]Spoiler quote[/spoiler]</td> +  print('Hello World!') 
-  <td> +</code> 
-    <div class="wall-item-container"> + 
-      <strong class="spoiler">Author wrote:</strong><br> +=== Quotes === 
-      <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> +To quote a text, you can use the ''[quote]'' tag within your posting. 
-      <div class="body-attach"><div class="clear"></div></div> + 
-    </div> +<code> 
-  </td> +Hey I found this wonderful quote from Albert Einstein 
-</tr> +[quote=Albert Einstein] 
-<tr> +Everybody is a genius, but if you judge a fish by its ability to climb a tree, it will live its hole life believing it is stupid. 
-  <td>[hr] (horizontal line)</td> +[/quote] 
-  <td><hr></td> +I can fully agree with it! 
-</tr> +</code> 
-</table>+ 
 +the posting will look something like this 
 + 
 +{{ :docs:bbcode_quote_alberteinstein.png?nolink |}} 
 + 
 +If you don't provide the ''=Author'' information in the opening ''[quote]'' tag, Friendica wont display the line //Author wrote://. 
 + 
 +=== Spoilers === 
 + 
 +Sometimes you may want to warn your readers, that they should avoid reading any further if they wont get spoiled. In Friendica you can use the ''[spoiler]'' tag to do so. This will hide the included text behind the warning you issue, your Friendica contacts will have to click on the waring to read the hidden text. 
 + 
 +<code> 
 +So the other day we were at the cinema watching this awesome movie ... it don't want to spoil too much you should go see it for yourself. For those not caring about spoilers, you can find my review below. 
 + 
 +[spoiler=Don't read any further if you don't want to know any details before watching the move]Ok, I told you about the spoilers incoming, last chance ;-) 
 + 
 +So the most awesome... 
 +[/spoiler] 
 + 
 +After the movie we had lunch at the Funny Milkbar which... 
 +</code> 
 + 
 +The result can be seen in the following screenshots. On the first the text inside the spoiler tag is hidden. I 
 + 
 +{{  :docs:bbcode_spoiler1.png?nolink  |Only the text surrounding the spoiler is shown, and the spoilers warning.}} 
 + 
 +In the second it is shown after the reader had clicked on the spoiler text. 
 + 
 +{{  :docs:bbcode_spoiler2.png?nolink  |After clicking on the spoiler warning, your Friendica contacts will the the text inside the spoiler tag}} 
 + 
 +=== Horizontal Lines ===
  
-<a name="supported-code">1</a>: Supported language parameter values for code highlighting: +If you want to use a horizontal line as visual divider between two paragraphs, you can use the ''[hr]'' BBCode tag. Even used in the middle of a text, it will insert a horizontal line of the postings width as separation between the text.
-- abap +
-- avrc +
-- cpp +
-- css +
-- diff +
-- dtd +
-- html +
-- java +
-- javascript +
-- js +
-- mysql +
-- perl +
-- php +
-- python +
-- ruby +
-- sh +
-- sql +
-- vbscript +
-- xml+
  
 ==== Titles ==== ==== Titles ====
  
 You can set heading with descending order by using ''[h1]'' to ''[h6]'' tags. ''[h1]'' is the main header, displayed with the largest font size, while ''[h6]'' is the lowest header. You can set heading with descending order by using ''[h1]'' to ''[h6]'' tags. ''[h1]'' is the main header, displayed with the largest font size, while ''[h6]'' is the lowest header.
 +
 +If you set a title for the posting you are composing, it is displayed as level 2 header. To keep the hierarchical order of section titles, you should stick to the ''[h3]'' and lower titles.
 +
 +
  
 ==== Tables ==== ==== Tables ====
Line 297: Line 312:
 But it can be useful to define a custom abstract that will only be displayed on the external network. But it can be useful to define a custom abstract that will only be displayed on the external network.
 This is done with the [abstract]-element. This is done with the [abstract]-element.
-<table class="bbcodes"> + 
-<tr> +<code> 
-  <th>BBCode</th> +[abstract]Totally interesting! A must-see! Please click the link![/abstract] 
-  <th>Result</th> +I want to tell you a really boring story that you really never wanted to hear. 
-</tr> +</code> 
-<tr> + 
-  <td>[abstract]Totally interesting! A must-see! Please click the link![/abstract]<br> +Twitter would display the text  
-I want to tell you a really boring story that you really never wanted to hear.</td> + 
-  <td>Twitter would display the text <blockquote>Totally interesting! A must-see! Please click the link!</blockquote> +> Totally interesting! A must-see! Please click the link! 
-On Friendica you would only see the text after <blockquote>I want to tell you a really ...</blockquote></td> + 
-</tr> +On Friendica you would only see the text after  
-</table>+ 
 +> I want to tell you a really ...
  
 It is even possible to define abstracts for separate networks: It is even possible to define abstracts for separate networks:
  
-<table class="bbcodes"> +<code>
-<tr> +
-  <th>BBCode</th> +
-  <th>Result</th> +
-</tr> +
-<tr> +
-  <td>+
 [abstract]Hi friends Here are my newest pictures![/abstract]<br> [abstract]Hi friends Here are my newest pictures![/abstract]<br>
 [abstract=twit]Hi my dear Twitter followers. Do you want to see my new [abstract=twit]Hi my dear Twitter followers. Do you want to see my new
Line 324: Line 334:
 [abstract=apdn]Helly my dear followers on ADN. I made sone new pictures [abstract=apdn]Helly my dear followers on ADN. I made sone new pictures
 that I wanted to share with you.[/abstract]<br> that I wanted to share with you.[/abstract]<br>
-Today I was in the woods and took some real cool pictures ...</td> +Today I was in the woods and took some real cool pictures ... 
-  <td>For Twitter and App.net the system will use the defined abstracts.<br> +</code> 
-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> + 
-</tr> +For Twitter and App.net the system will use the defined abstracts. 
-</table>+ 
 +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.
  
 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. 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.
Line 336: Line 347:
 Instead you have to name the explicit network: Instead you have to name the explicit network:
  
-<table class="bbcodes"> +<code> 
-<tr> +[abstract]These days I had a strange encounter...[/abstract]
-  <th>BBCode</th> +
-  <th>Result</th> +
-</tr> +
-<tr> +
-  <td> +
-[abstract]These days I had a strange encounter...[/abstract]<br>+
 [abstract=goog]Hello my dear Google+ followers. You have to read my newest blog post![/abstract]<br> [abstract=goog]Hello 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> [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> +While taking pictures in the woods I had a really strange encounter... 
-  <td>Google and Facebook will show the respective abstracts while the other networks will show the default one.<br> +</code> 
-<br>Meanwhile, Friendica won't show any of the abstracts.</td> + 
-</tr> +Google and Facebook will show the respective abstracts while the other networks will show the default one. Meanwhile, Friendica wont show any of the abstracts.
-</table>+
  
 The [abstract] element is not working with connectors where we post HTML directly, like Tumblr, Wordpress or Pump.io. The [abstract] element is not working with connectors where we post HTML directly, like Tumblr, Wordpress or Pump.io.
  • Last modified: 2022-06-09 08:51