Skip to content

Instantly share code, notes, and snippets.

@Lyrositor
Last active April 22, 2017 11:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Lyrositor/c0cf4577e955ceca4cc4ac2362767b0a to your computer and use it in GitHub Desktop.
Save Lyrositor/c0cf4577e955ceca4cc4ac2362767b0a to your computer and use it in GitHub Desktop.
<bbxml>
<include src="lib/common.xml" />
<classes>
<class name="title">
border-bottom: solid 3px #735c4e;
color: #735c4e;
font-size: 38px;
font-weight: bold;
margin: 0 auto 10px;
padding-bottom: 5px;
text-align: center;
width: 250px;
</class>
<class name="section-heading">
background-color: #735c4e;
background: linear-gradient(90deg, #735c4e, #735c4e 100px, #f7f2ef);
height: 40px;
margin: 30px 0px 30px 40px;
position: relative;
</class>
<class name="section-heading-circle">
background-color: #735c4e;
border-radius: 50%;
color: transparent;
height: 60px;
left: -40px;
position: absolute;
top: -10px;
width: 60px;
</class>
<class name="section-heading-text">
color: #d8c8af;
font-size: 24px;
left: -18px;
position: absolute;
text-shadow: 1px 1px 10px black;
top: 2px;
</class>
<class name="subsection-heading">
color: #71634d;
font-size: 20px;
font-weight: bold;
margin-bottom: 5px;
</class>
</classes>
<templates>
<template name="section-heading">
<div class="section-heading">
<div class="section-heading-circle">C</div>
<div class="section-heading-text"><font option="Graduate">{text}</font></div>
</div>
</template>
</templates>
<body>
<div class="title">
<font option="Graduate">[bbcoder]</font>
</div>
<div class="p"><b>bbcoder</b> is a command-line application which simplifies the writing of complex BBCode posts. When a post reaches a certain size and complexity, I find it can become difficult to find your place in your code to make a simple change, a problem that is compounded when you wish to make the same change in multiple areas.</div>
<div class="p">Enter bbcoder. Instead of writing BBCode, you write in a simple, custom XML-based markup language I have created called <b>BBXML</b>. If you've ever written some HTML, it should look very familiar. BBXML offers the following features over BBCode:</div>
<list>
<li><b>Classes:</b> you can assign a class to any BBCode which has an option (e.g. <div class="ch"><plain>[DIV=]</plain></div>). A class is mostly intended for CSS properties in combination with <div class="ch">[DIV]</div>, but it could be used for any type of option content. You start by defining a class somewhere in your project, giving it a name and a value; you can then re-use that class's value for any tag, avoiding the need to copy-paste CSS properties constantly.</li>
<li><b>Templates:</b> if a class isn't enough, you can use a template. This is a more powerful tool as it lets you define a BBXML template, with optional parameters, then insert that template in your post. A simple example is a status box for your character: you would define the formatting once, and then for every subsequent post you just have to include the status box template, filling it in with the character's mood, location, etc.</li>
<li><b>Project structure:</b> BBXML can be split over multiple files that are then combined to create a single BBCode post. This allows you to define commonly-used code in one file and create one file for each new post you make.</li>
<li><b>Insensitive to whitespace or newlines:</b> being able to make a new paragraph just by pressing Enter is convenient when writing standard RP posts, but for formatting-heavy posts it can be a nightmare. BBXML requires that line breaks be explicitly specified with the <div class="ch"><![CDATA[<br />]]></div> tag.</li>
<li><b>XML-based syntax:</b> one indirect advantage of using BBXML is that it will look very familiar to most editors. This means you can get all the advantages of traditional code editors, such as syntax coloration, auto-completion, etc.</li>
</list>
<div class="p">The new workflow when using bbcoder is to create your project, build one of its targets (i.e. a specific post), and copy the resulting BBCode to your post. This may be improved somewhat in later releases.</div>
<include template="section-heading"><param name="text">Usage</param></include>
<div class="subsection-heading">Installation</div>
<div class="p">bbcoder consists of a single executable file (with optional scripts along with it). The cleanest way to install it is to copy it to a folder on your system and then to add that folder your system's PATH (see these guides for <url option="https://www.howtogeek.com/118594/how-to-edit-your-system-path-for-easy-command-line-access/">Windows</url> and <url option="https://www.cyberciti.biz/faq/appleosx-bash-unix-change-set-path-environment-variable/">macOS</url>; if you are on Linux or other systems, you probably know how to do this already).</div>
<div class="p">A simpler method is to just copy the bbcoder executable to the root of your bbcoder project. This means you'll only be able to call it from that folder, but if you only have a single project that's not a big problem anyway.</div>
<div class="p">To run bbcoder, open a terminal ("Command Prompt" on Windows, "Terminal" on macOS), navigate to your project's folder (using the "cd" command; e.g. <div class="ch">cd path/to/my/bbcoder/project</div>) and run bbcoder. On Windows, this is a simple matter of typing <div class="ch">bbcoder</div> in the terminal. On other systems, if you only copied it to the current folder instead of adding it to your path, you might have to write <div class="ch">./bbcoder</div> instead.</div>
<div class="p">You can alternatively use the scripts I have provided (see the Downloads section) or make your own if you have specific needs.</div>
<div class="subsection-heading">Setting up your project</div>
<div class="p">bbcoder works on BBXML projects - a set of files linked together through inclusions and a master project definition file. Your first step is to create your <div class="ch">project.xml</div> file, which defines your project for bbcoder. Create a new folder, then using your preferred editor (I recommend <url option="https://www.jetbrains.com/idea/">IntelliJ</url> if you wish to simplify your workflow; otherwise, I can recommend <url option="https://notepad-plus-plus.org/">Notepad++</url> (Windows-only)), create a file called <div class="ch">project.xml</div> with the same content as <b><url option="https://github.com/Lyrositor/bbcoder/tree/master/doc/example/project.xml">this file</url></b>.</div>
<div class="p">The <div class="ch"><![CDATA[<include>]]></div> part defines the various folders which should be included as part of your project. This can be useful if you have a bunch of files located elsewhere on your drive and you want to use them in multiple projects.</div>
<div class="p">The <div class="ch"><![CDATA[<targets>]]></div> part defines the targets (i.e. posts) which bbcoder can build. Each target has a name and a source file; by convention, these source files are all located under the <div class="ch">src/</div> subdirectory. A default target can be specified using the <div class="ch">default</div> attribute. In this example, we have created a target called <div class="ch">example-main</div> using <div class="ch">src/main.xml</div> as its source.</div>
<div class="subsection-heading">Creating a new target</div>
<div class="p">Next you need to create your target's source code. This is the file that will contain the body of your post. Create a file called <div class="ch">src/main.xml</div> containing <b><url option="https://github.com/Lyrositor/bbcoder/blob/master/doc/example/src/main.xml">this text</url></b> and another file called <div class="ch">include/common.xml</div> containing <b><url option="https://github.com/Lyrositor/bbcoder/blob/master/doc/example/include/common.xml">this text</url></b>. The former is our main target file, while the latter is more of a sort of "library" file, which you can re-use elsewhere in your project.</div>
<div class="p">The <div class="ch"><![CDATA[include]]></div> tags allow you to include other files in this project, which lets you re-use classes and templates defined in other files.</div>
<div class="p">The <div class="ch"><![CDATA[classes]]></div> section defines the classes you can use in your project. Each class is identified by a name and a value. The value can be arbitrary text, but this is usually CSS and functions somewhat like a CSS class.</div>
<div class="p">The <div class="ch"><![CDATA[templates]]></div> section contains template definitions. You can see these as more advanced classes, which you can use when you want to re-use a bunch of code. Templates can contain parameters, which take the form of <div class="ch"><plain>{</plain>your_parameter_name<plain>}</plain></div>. These will be replaced by their new values when the templates are included. The inside of a template works just like the <div class="ch"><![CDATA[body]]></div> section.</div>
<div class="p">Finally, the <div class="ch"><![CDATA[body]]></div> contains your actual post. Here, almost any tag you use will be interpreted as a BBCode tag (e.g. <div class="ch"><![CDATA[<b></b>]]></div> is the same as <div class="ch"><plain>[b][/b]</plain></div>). There are a few key differences however:</div>
<list>
<li>Classes and options: every BBCode tag supports options using <div class="ch">=</div> can have a class (or classes) and an option specified. The <div class="ch">class</div> attribute can be used to specify a list of space-separated classes, while the <div class="ch">option</div> attribute indicates values specific to this tag. They can be used together, in which case the specific option will be appended to the end of the class's value. Example: <div class="ch"><![CDATA[<div class="class1 class2" option="background-color: yellow;">]]></div></li>
<li>Including templates: you can include templates using the <div class="ch"><![CDATA[<include>]]></div> tag, which indicates the name of the template to include. The body of the tag then contains a list of <div class="ch"><![CDATA[<param>]]></div> tags indicating the values of the template's parameters. The value can be simple text or additional BBXML code.</li>
<li>Line breaks: you have to explicitly require a line break using the special <div class="ch"><![CDATA[<br />]]> tag.</div></li>
<li>Lists: list elements must be surrounded by <div class="ch"><![CDATA[<li></li>]]></div> tags instead of prefixed by <div class="ch"><plain>[*]</plain></div></li>
</list>
<div class="subsection-heading">Building</div>
<div class="p">You can then build your project simply by running bbcoder from the root of your project. The resultant BBCode will be in the <div class="ch">target/</div> subdirectory.</div><br /><br />
<div class="p"><i>I hope to add additional documentation as time goes on. I have also provided the BBXML source of this post at the bottom.</i></div>
<include template="section-heading"><param name="text">Downloads</param></include>
<div class="p">The current version is <b>0.1.0</b>. This is a <b>beta</b> release - it should be working, but might be missing some features and have some small bugs.</div>
<div class="p">The recommended way of running bbcoder is from the command-line (on Windows this is the Command Prompt by default, and on macOS this is the Terminal). Some convenience scripts are nonetheless included for simple use-cases.</div>
<div class="p"><i>As an example of a setup: I use IntelliJ IDEA (a free IDE) for editing BBXML projects. I have configured bbcoder as an External Tool and bound it to F10 - whenever I want to build the BBCode, I just hit F10 and copy the result.</i></div>
<div class="p" option="color: red;"><b>Warning:</b> your browser may inform you that the file is potentially dangerous because it is not frequently downloaded. This is normal. If you have any doubts as to its security, feel free to look at the source code and to compile it yourself.</div>
<div class="p"><b>Windows:</b> <url option="https://github.com/Lyrositor/bbcoder/releases/download/v0.1.0/bbcoder-win-0.1.0.zip">bbcoder-win-0.1.0.zip</url></div>
<indent>You can use the <div class="ch">bbcoder_run.bat</div> file to avoid using the command prompt. Just drag-and-drop a project on to it and it should build its default target; if it's in the same directory as the project, you can just double-click it. Make sure it's always in the same folder as the actual <div class="ch">bbcoder.exe</div> program.</indent>
<div class="p"><b>macOS:</b> <i>A macOS version is underway. I do not have access to a Mac so it may take some to release new versions for macOS. You can already build it using the source code, however.</i></div>
<div class="p"><b>Source Code:</b> <url>https://github.com/Lyrositor/bbcoder</url></div>
<include template="section-heading"><param name="text">Planned Features</param></include>
<div class="p">I am planning on working on the following features for upcoming releases; this is not a promise that they will be released, just an indication of what I'd like to see implemented:</div>
<list>
<li>Aliasing: BBXML can be very verbose (as is XML), and I would like to provide a way to alias certain frequently-repeated parts.</li>
<li>Live preview: I have an idea of how this could be implemented. Essentially, it would watch your project, and whenever a file is updated, it re-compiles the BBCode and displays a preview of the result in your browser.</li>
<li>Better error messages: it's not always clear where an error in your project comes from currently; I hope to improve this.</li>
<li>Ease of use: various quality of life improvements to make installing and using bbcoder simpler</li>
</list>
<div class="subsection-heading">Known bugs</div>
<list>
<li>Circular includes aren't currently detected</li>
<li>Multi-line code display isn't working either; might be a problem with the underlying library</li>
</list>
<include template="section-heading"><param name="text">License</param></include>
<div class="p">bbcoder is licensed under the CC0 1.0 Universal license. Essentially, it has been released into the public domain, and you are free to use, modify or distribute its code without providing attribution (though it would be appreciated).</div>
<include template="section-heading"><param name="text">Source</param></include>
<div class="p">The BBXML source code for this post has been provided as an example:</div>
<list>
<li><div class="ch">project.xml</div>: <url>https://gist.github.com/Lyrositor/a8d0b9f1609c78d7cec2b402980f9103</url></li>
<li><div class="ch">src/lib/common.xml</div>: <url>https://gist.github.com/Lyrositor/0e214d0039cb5204bcc2475281d88a14</url></li>
<li><div class="ch">src/bbcoder-post.xml</div>: <url>https://gist.github.com/Lyrositor/c0cf4577e955ceca4cc4ac2362767b0a</url></li>
<li>BBCode: <url>https://gist.githubusercontent.com/Lyrositor/391f4d60b3a6a60eac17204c4da6dcaf/raw/bbcode.txt</url></li>
</list>
</body>
</bbxml>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment