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)
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.
Please see the Codex for commands available and formatting.
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++
If you don’t have it already, download and install Notepad++.
In Notepad++, go to Language->Define Your Own Language. Then click on the Operators & Delimiters tab.
In the Delimiter style 1 ‘Open’ field add
Then in the Delimiter style 1 ‘Close’ field add
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’.
In the Delimiter style 2 ‘Open’ field add
Then in the Delimiter style 2 ‘Close’ field add
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’.
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.
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.)
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.
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.
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.
Make Your World Look Awesome!
Let us know how you use these ideas. We’d love to see your creations posted in the WA Discord #guild-showcase.
Until next time, my fellow smiths. Go light up the forge!