Applying some sort of modification to a span of text on a website would typically require a bit of HTML, specifically a <span> tag with a class or id attribute so it could be targeted with CSS. Homebrewery simplifies this with a special extended Markdown syntax that utilizes “curly” or “mustache” braces for both spans and block-level divs. Because this is unique to the Homebrewery it can throw users off– searching for relevant information on the web typically yields no results. So hopefully we can change that here.
Note: because this is a syntax unique to the Homebrewery, there isn’t an easy way to provide syntax highlighting for it in the following code examples, though there is syntax highlighting in the Homebrewery.
Markup
Wrapping a stretch of text in a span that can be targeted by CSS is pretty simple. To begin with the bare minimum for a span, wrap your text in double curly braces and be sure there is a space between the opening braces and the first word. This will create a basic <span> element around your text with no added attributes beyond a default class="inline-block":
Eiusmod Lorem dolore {{ ullamco exercitation incididunt}} fugiat officia labore commodo.Eiusmod Lorem dolore <span class="inline-block">ullamco exercitation incididunt</span> fugiat officia labore commodo.Visually, your text will not be altered in anyway with the above. You could now go and target all span elements and apply CSS in the Style Editor, but generally it makes more sense to add some identifiers to the span for better targeting.
ID’s and Classes
To apply an id or classes to your span, you’ll add them inside the braces, separated by commas, and ending with that space— the first space inside the braces is what separates these attributes from your actual textual content. There is one exception that allows the use of spaces in the attributes, shown later. For now, take a look at how a span is given an id and two class names:
Eiusmod Lorem dolore {{#wasteland-castle,location,abandoned ullamco exercitation incididunt}} fugiat officia labore commodo.Eiusmod Lorem dolore <span class="inline-block location abandoned" id="wasteland-castle">ullamco exercitation incididunt</span> fugiat officia labore commodo.The id is added with a # preceding it, and the subsequent class names location and abandoned are just added with no special symbol– class names are just assumed without any special identifier. Note that the first space separates “abandoned” and “ullamco”, and that is the break point for the list of attributes. The order of the attributes does not matter, and none are required.
You could now use CSS selectors to apply styling to the span, targeting either the id or the class names (or both).
Inline Styles
Alternatively, or in addition to, you can apply inline styles directly to the span without using the Style Editor. To do this, add CSS declarations to that attribute area before the first space inside the braces. If a CSS property requires a value that itself has a space, you can wrap the value inside double quotes. For example:
Eiusmod Lorem dolore {{#wasteland-castle,location,abandoned,border:"1px solid gray",border-radius:6px ullamco exercitation incididunt}} fugiat officia labore commodo.Eiusmod Lorem dolore <span class="inline-block location abandoned" id="wasteland-castle" style="border:1px solid gray; border-radius:6px;">ullamco exercitation incididunt</span> fugiat officia labore commodo.
Custom Attributes
Finally, if there are attributes you’d like to add to your span element beyond id, class, or style, you can add any custom attribute by utilizing the = symbol. In the attributes area before the first space inside the curly braces, a = will denote a custom attribute declaration:
Eiusmod Lorem dolore {{#wasteland-castle,location,abandoned,border:"1px solid gray",border-radius:6px,lang="de" ullamco exercitation incididunt}} fugiat officia labore commodo.Eiusmod Lorem dolore <span class="inline-block location abandoned" id="wasteland-castle" style="border:1px solid gray; border-radius:6px;" lang="de">ullamco exercitation incididunt</span> fugiat officia labore commodo.In this example, the lang attribute is set to de, or Deutsch/German, for this specific span. (Setting the lang attribute doesn’t practically do anything, like translating the string from another language, it just indicates it should be interpreted as German which impacts some things like how it is hyphenated).
Closing
So that is basically the custom syntax for span. Remember, this is unique to the Homebrewery (though it draws inspiration from other places), so it can be difficult to find additional information on the general web. The syntax was originally designed to reduce headaches with remembering to properly close spans (and divs), which is still required with the braces but easier to actually do. In the process, the real value came in reducing the amount of text needed to apply id’s, classes, styles, and attributes and making “layout” changes possible with a Markdown-like syntax.