BBCode Organization (readability)

Started by TwoHundredTabs, May 30, 2014, 08:06:25 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

TwoHundredTabs

With HTML/CSS/Javascript there are ways to make comments and layout changes in order to make one's work more visually distinguishable/parsable. I'm wondering if there is any similar thing that can be done with BBCode, other than using the [Comment] tags - because they don't really help with distinguishing breaks the way that // does.

Because I'm asking about formatting BBCode, I'll go ahead and drop these links:

http://www.teamopolis.com/tools/bbcode-table-generator.aspx

http://www.dynawebdesigns.com/resources-html_to_bbc_converter.htm
[tr]   [td]
.............................................  [/td]   [td][/td]   [td] [/td]   [td] .............................................  [/td]   [td][/td]   [td] [/td]   [td] .............................................  [/td]   [td][/td]   [td] [/td]   [td].............................................  [/td]   [/tr]   [tr]   [td] .............................................  [/td]   [td] [/td]   [td] [/td]   [td] .............................................  [/td]   [td]
Hover over a link to see a description
[/td]   [td] [/td]   [td] .............................................  [/td]   [td] [/td]   [td] [/td]   [td] .............................................  [/td]   [/tr][tr]   [td] .............................................  [/td]   [td] [/td]   [td] [/td]   [td] .............................................  [/td]   [td] [/td]   [td] [/td]   [td] .............................................  [/td]   [td] [/td]   [td] [/td]   [td] .............................................  [/td]   [/tr][/table]

Kye

I'm not quite sure what exactly you're trying to do with the bbcode, but here's a tutorial one of our members created. 

TwoHundredTabs

Quote from: Kyrsa on May 30, 2014, 10:03:58 AM
I'm not quite sure what exactly you're trying to do with the bbcode, but here's a tutorial one of our members created.

I was asking about a means of making the actual coding process easier to review. I eventually decided to make a lang file in Notepad++ and was going to post it here like an hour ago, but I've been raging over an inexplicable problem with part of my lang partially not working. I finally deleted the problem and all of my files in AppData and reinstalled to a new directory, and that seems to have fixed whatever the issue was.

I'll post for UDL (user-defined language file) here once it's finished.
[tr]   [td]
.............................................  [/td]   [td][/td]   [td] [/td]   [td] .............................................  [/td]   [td][/td]   [td] [/td]   [td] .............................................  [/td]   [td][/td]   [td] [/td]   [td].............................................  [/td]   [/tr]   [tr]   [td] .............................................  [/td]   [td] [/td]   [td] [/td]   [td] .............................................  [/td]   [td]
Hover over a link to see a description
[/td]   [td] [/td]   [td] .............................................  [/td]   [td] [/td]   [td] [/td]   [td] .............................................  [/td]   [/tr][tr]   [td] .............................................  [/td]   [td] [/td]   [td] [/td]   [td] .............................................  [/td]   [td] [/td]   [td] [/td]   [td] .............................................  [/td]   [td] [/td]   [td] [/td]   [td] .............................................  [/td]   [/tr][/table]

Oreo

I guess I am not seeing the problem either. The BBcode is pretty easy to review. If you need to see more of the page you can always hover over the double line at the bottom of the text window and drag it down to scan the entire post.

Are you talking about on a device other than a computer? : /

She led me to safety in a forest of green, and showed my stale eyes some sights never seen.
She spins magic and moonlight in her meadows and streams, and seeks deep inside me,
and touches my dreams. - Harry Chapin

The Dark Raven

Also, BBCode is more of a formatting language than a programming language, IIRC.  I have never used it for something here that would warrant programming comments.  ???

Check my A/A | O/O | Patience is begged. Momma to Rainbow Babies and teetering toward the goal of published author. Tentatively taking new stories.

TwoHundredTabs

Quote from: Oreo on May 30, 2014, 11:47:33 AM
I guess I am not seeing the problem either. The BBcode is pretty easy to review. If you need to see more of the page you can always hover over the double line at the bottom of the text window and drag it down to scan the entire post.

Are you talking about on a device other than a computer? : /

The code gets hard to read when you're using a lot of it all at once. A single bracket out of place can screw up a whole page. See
Quote from: TwoHundredTabs on May 24, 2014, 08:06:11 PMquoted post
for an example what can happen when a simple copy & paste error is made.

Thanks for the info and helpfulness.

I think you'll understand what I'm talking about when I post screenshots of what I've made and how it works. The intention is to make post design easier for those who use a lot of BBCode for O/O pages and Planning threads.
[tr]   [td]
.............................................  [/td]   [td][/td]   [td] [/td]   [td] .............................................  [/td]   [td][/td]   [td] [/td]   [td] .............................................  [/td]   [td][/td]   [td] [/td]   [td].............................................  [/td]   [/tr]   [tr]   [td] .............................................  [/td]   [td] [/td]   [td] [/td]   [td] .............................................  [/td]   [td]
Hover over a link to see a description
[/td]   [td] [/td]   [td] .............................................  [/td]   [td] [/td]   [td] [/td]   [td] .............................................  [/td]   [/tr][tr]   [td] .............................................  [/td]   [td] [/td]   [td] [/td]   [td] .............................................  [/td]   [td] [/td]   [td] [/td]   [td] .............................................  [/td]   [td] [/td]   [td] [/td]   [td] .............................................  [/td]   [/tr][/table]

jouzinka

When I am absolutely out of ideas, I try to use the WYSIWYG editor that E has - makes spotting mistakes a bit easier.
Story status: Not Available
Life Status: Just keep swimming...
Working on: N/A

TwoHundredTabs

#7
Ok, so I've learned a few things from this.

1) Elliquiy uses some different BBCode from the general SMF format.

2) Tables are easily broken. I've tried posting several table codes - from complex down to simple - and the board keeps screwing them up. Only the most simple one survived (a 4 cell table with the numbers 1, 2, 3, and 4 in them).



If you're like me and find keeping track of code much easier if it's color-coded, here's a bit of text that you can save as an .xml file, then import into Notepad++ - http://pastebin.com/ambtrwdg

If you don't have Notepad++, you can get it here for free - http://notepad-plus-plus.org

Here's a screenshot that shows you how to import the language file from within Np++ - https://elliquiy.com/elluiki/images/d/df/NpPP-BBCodeLang-Import.jpg

Step 1: Open the "Language" menu and click "Define your language"

Step 2: Click "Import"

Step 3: Choose the .xml file you saved the pastebin text as

Step 4: Make sure to click on the language name from your "Language" menu in order for Np++ to use it, after you've imported the file.

That's it!


The udlanguage color-codes tags nested within delimiters (and the delimiters, themselves - see pink-circled areas on screenshot) and highlights independent brackets - (, [ , <, etc. - (see green-circled area on screenshot). It includes all of the BBCode options for Elliquiy (some of which might be outdated, so they're there just in case).

I tried to sort the delimiters into color-coded groups based on how they function and what they do (e.g. all link-related tags turn blue). If you want to change how they're arranged or colored, it isn't hard to do.

Simple tags like hr, li / *, b, i, and so on turn red and have an increased font size so that they're easier to spot.



Sidenote #1: If you want to change how the operators and delimiters work together, avoid adding = to anything. It breaks all of the relationships.

Sidenote#2: I know that Np++ might only be helpful to a few people, but I find it very useful. The built-in WYSIWYG here on the forums doesn't always save all of the code used (try making an advanced table or list and then hitting modify), so keeping things straight for diagnosing things and being certain of exactly what you're putting in requires saving your text in an outside program. If you're going to do that anyway, it might as well be in something that makes it easier to check your work for errors.

Sidenote #3: If you want to only have some content nested, you can click on the "Styler" button (which is where you change colors for everything) and deselect the things you don't want nested.
[tr]   [td]
.............................................  [/td]   [td][/td]   [td] [/td]   [td] .............................................  [/td]   [td][/td]   [td] [/td]   [td] .............................................  [/td]   [td][/td]   [td] [/td]   [td].............................................  [/td]   [/tr]   [tr]   [td] .............................................  [/td]   [td] [/td]   [td] [/td]   [td] .............................................  [/td]   [td]
Hover over a link to see a description
[/td]   [td] [/td]   [td] .............................................  [/td]   [td] [/td]   [td] [/td]   [td] .............................................  [/td]   [/tr][tr]   [td] .............................................  [/td]   [td] [/td]   [td] [/td]   [td] .............................................  [/td]   [td] [/td]   [td] [/td]   [td] .............................................  [/td]   [td] [/td]   [td] [/td]   [td] .............................................  [/td]   [/tr][/table]