Hey, worldsmiths! Since you’ve had a good taste of coding, we’ll hit the basics this month. Today we’ll talk about a way to help find those pesky errors.

Debugging your BBCode (or CSS) with Notepad++ (Windows Users)

What is Notepad++?

It’s a free text editor built for writing and editing code. So it’s perfect for the job! CSS support is built in – just set the language and let it color code everything for you. But for checking BBCode there are a few steps you’ll need to do first.

A quick note: if you don’t have a windows machine, there are other good code editors out there like Visual Code Studio. I’m just not as familiar with VCS.

What if I don’t know anything about BBCode?

Please see the Codex for commands available and formatting.

How hard is this going to be?

Your world-building time is precious! This won’t take long. Just know that BBCode isn’t standardized and WA has its own flavor of BBCode, so we have to define a new (programming) language for Notepad++. For BBCode, this is easy! Promise! It’s just a few steps.

How to define a language for BBCode checking in Notepad++

Step 1

If you don’t have it already, download and install Notepad++.

Step 2

In Notepad++, go to Language->Define Your Own Language. Then click on the Operators & Delimiters tab.

Step 3

In the Delimiter style 1 ‘Open’ field add

[

Then in the Delimiter style 1 ‘Close’ field add

]

Step 4

Click on the Delimiter style 1 ‘Styler’ button. Under Font Options, click on the ‘Foreground color’ box to choose a color you like. And check the boxes for nesting delimiters 1 and 2. It’s also recommended clicking the boxes for ‘bold’ and ‘italic’.

Then click ‘Ok’.

Step 5

In the Delimiter style 2 ‘Open’ field add

@[

Then in the Delimiter style 2 ‘Close’ field add

]

Step 6

Click on the Delimiter style 2 ‘Styler’ button. Under Font Options, click on the ‘Foreground color’ box to choose a color you like – that is different from Delimiter 1’s color. And check the boxes for nesting delimiters 1 and 2. It’s also recommended clicking the boxes for ‘bold’ and ‘italic’.

Step 7

Now you’ll want to save it. Click Save As on the same screen, give it a meaningful name like WA BBCode, and click ‘Ok’. Then close the popup window.

Step 8

Restart Notepad++ and the WA BBCode should show up under Languages at the bottom.

How To Use the WA BBCode ‘language’

Put the BBcode in Notepad++

When you have your BBCode pasted/loaded into Notepad++, click on Languagesand choose WA BBCode (or whatever you named it).

To check your tags

Scan through your code in the Notepad++ window. Is there anything that should be the color you chose for your tags, that isn’t the right color?
Double-click on the name of a tag. All tags with that name will now be highlighted. Check to make sure each tag that should have a matching closing tag (one with a / in it) has one. (Common culprits are li, ul, tr, td, left, right, center, justify, row, and col.)

An example

Here’s a snippet of code borrowed from the Codex pages. But there’s a problem. Can you see that there isn’t a closing [/li] tag in the 4th line down? (line #28 in the editor)

If you want color coded tags, see my Hacks and Help article: Checking BBCode with Notepad++ (Advanced Usage) for more tricks.

Credits

Kummer Wolfe on the WA discord had a great suggestion to use Notepad++ to color-code BBCode tags and we hashed it out together for the information needed for this article.

Why doesn’t Notepad++ just have BBCode listed as a language?

The problem is, that BBCode isn’t standardized and WA has its own flavor of BBCode, so we have to define a new (programming) language for our text editor.

Why not just share a .XML file to import?

I thought about it. But what if people would like to tweak it for their own tastes and purposes? Then they’d have to figure out everything that KW and I did, re-inventing the wheel. So, we might as well get you started on how to customize it from the get-go.

Coming Soon

We’ll talk about CSS, specifically what does ‘.’ and ‘#’ mean? and I’ll have an intro to statblocks, for snippets of info you use more than once in your world.