[News] New BBCode Features!

Ben Visness —
Hey all - we just deployed some fixes and improvements to the network's BBCode system, and with them come a few new features that I hope you will enjoy.

Monospace Text

We've added the [​m] tag, which allows you to do monospace text inline. For example: 

1
This text is [m]monospace[/m]!


becomes:

This text is monospace!


We've also added a toolbar button for it next to B, I, and U, so you'll never forget which letter it is.

Custom Languages in Code Blocks

The [​code] block now lets you specify what language to use for syntax highlighting, in case it guesses incorrectly or doesn't guess at all. For example: 

1
2
3
4
5
6
[code language=c]
int main() {
    printf("Hello, world!");
    return 0;
}
[​/code]


becomes: 

1
2
3
4
int main() {
    printf("Hello, world!");
    return 0;
}


You can use any language supported by Pygments, so go wild.

Reliable Nesting

The system now has a better understanding of BBCode's structure, particularly with regard to nested tags. For example: 

1
2
3
4
5
6
7
8
9
[ul]
[li]Bullet point 1[/li]
[li]Bullet point 2
    [ol]
    [li]Number 1, featuring a quote: [quote]Somebody said something![/quote][/li]
    [li]Number 2[/li]
    [/ol]
[/li]
[/ul]


becomes:

  • Bullet point 1
  • Bullet point 2
    1. Number 1, featuring a quote:
      bvisness
      Somebody said something!
    2. Number 2




Flexible Syntax

The system is now more accepting and understanding of people's aesthetic choices when it comes to their BBCode tags. All of these are now valid ways of expressing the same [​quote] tag: 

1
2
3
[quote=bvisness]Hello, world![/quote]
[QUOTE="bvisness"]Hello, world![/quote]
[ quote = 'bvisness' ]Hello, world![/ quote ]


And more!

  • [​left], [​center], and [​right] now actually work.
  • [​youtube] now supports more types of YouTube URLs.
  • The [​spoiler] tag now works on Mac and other platforms where text selection looks different.
  • Mismatched or improperly nested tags should be handled more gracefully and safely.


Plus, we're slightly tweaking CSS and visual appearance to make things a little more readable, and prevent annoying whitespace where you don't want it.

Make sure to let us know if you have any questions or feedback about these changes! And make sure to use some fancy new tags when you do. 😄

-Ben
Sign up for our email newsletter:
 

Comments

Leave a Comment
Simon Anciaux
Thanks for the improvements.
Some feedback:
- When typing a comment, moving the mouse over the scrollbar of the comment text area (you need some lines to have the scrollbar) leaves the cursor as a "text cursor" instead of the arrow.
- in code tags, tab characters are 8 spaces, which is too much in my opinion. 4 is more common I believe.
- it's a personal opinion and I don't know if you have control over that, but the C syntax highlighting is a bit too much for my taste. I would remove operator (+ - . -> = &...) coloring if possible. Function name in declaration/definition too but less annoying.
- Formatting shortcut conflicts with keyboard layout
Ben Visness
Thanks for the feedback! Tabs are now four spaces wherever possible - the CSS property that controls it isn't supported in IE or Edge, but we all know no one on this site uses those browsers anyway. 

1
2
3
int main() {
	printf("Four-space tabs!");
}


We also updated the editor so it should respect the AltGr key now. Thanks for calling our attention to that, and sorry it took 11 months for anyone to notice. 😛

I'm not sure how to reproduce your first issue, and unfortunately we can't really control what Pygments chooses to highlight within a code block. Sorry about that!

Let us know if you think of anything else.
Simon Anciaux
For the textarea scrollbar: I never paid attention but it seems that it's the default behavior (at least in Firefox on Windows 7) which is weird. And now that I've seen it, I can never un-see it.

For the operator highlighting, could you change the color to be the same as the text ? In the light theme the color of operators is very similar to the text color so the "problem" isn't there.
Leave a Comment