bbcodes.md

[rep] - Reputation bar.

---

Name: Reputation bar
Description: Adds a reputation bar.
Regular expression:

• I can't be bothered explaining.

\[rep=([0-9]*?),([0-9]*?)\]([\w\#]{4,11}),([\w\#]{4,11}),([\w\#]{4,11}),([\w\#]{4,11})\[\/rep\]

Replacement text:

<!-- This somehow works. Yes, I am amazed too. -->
<table style="border-collapse: collapse; width: 242px; height: 16px; background-color: $1; background: -webkit-linear-gradient(left, transparent 0%, transparent $1%, $3 $1%, $4 50%, $5 50%, $6 $2%, transparent $2%, transparent 100%); background: -moz-linear-gradient(left, transparent 0%, transparent $1%, $3 $1%, $4 50%, $5 50%, $6 $2%, transparent $2%, transparent 100%); background: -o-linear-gradient(left, transparent 0%, transparent $1%, $3 $1%, $4 50%, $5 50%, $6 $2%, transparent $2%, transparent 100%);" cellspacing=1 cellpadding=0>
  <tr style="margin: 0; padding: 0">
    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>
    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>
    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>
    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>
    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>
    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>
    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>
    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>
    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>
    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>
    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>
    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>
    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>
    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>
    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>
    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>
    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>
    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>
    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>
    <td style="width: 5%; box-sizing: border-box; border: 1px solid #222; background: none"></td>
  </tr>
</table>

[bgimg] - Background image

---

Name: Background image.
Description: Creates a box with an image background.
Regular expression:

• $1 - Anything that does not contain characters , ; and ' and ends with gif, jpg, jpeg, and png will be matched. (Image link).
• $2 - Any number between 0 and 999 will be matched. (Border radius).
• $3 - Anything will be matched. (Box content).

\[bgimg=((?:.[^\ \'\;]*?)\.(?:jpg|png|gif|jpeg))\,?([0-9]{1,3})?\](.*?)\[\/bgimg\]

Replacement text:

<div style="width: 100%; display: inline-block; box-sizing: border-box; padding: 32px; background: url('$1') no-repeat left; background-size: cover; background-size: cover; border-radius: $2px; box-shadow: inset 0 0 10px #000;">$3</div>

[float] - Float with width.

---

Name: Float Width
Description: Creates a box that floats to one side with specified percentage width.
Regular expression:

• $1 - left or right will be matched. (Float direction).
• $2 - Anything that contains only characters 0-9 and % and is between 1 and 3 characters long or auto will be matched. (width)
• $3 - Anything will be matched. (Box content).

\[float\=(left|right)\,?(?:([%0-9]{1,3}|auto))?\](.*?)\[\/float\]

Replacement text:

<div style="float: $1; width: $2; margin: 10px;">$3</div>