Injectors are the third and final type of “curly brace” syntax that is unique to the Homebrewery, and they are used to “inject” the preceding element with it’s own attribute contents. It is a custom extension of Markdown, and thus it can be difficult to find any information about how to use it when doing a web search. Even within the Homebrewery community it is sort of the “odd duck” between the “curly brace” trio (spans and divs being the other two).
Injectors are sometimes handy, and sometimes necessary, for applying attributes such as id, class, and style to other elements. They are mostly used in conjunction with images and headers, because regular Markdown syntax for these elements does not allow for declaring attributes within them naturally.
To get started, we’ll take a look at how you would normally insert an image into your brew using normal Markdown syntax. The resulting image in my brew is huge– I only see small portion of it, the rest is cut off at the edge of the page:
With regular Markdown there is no way to designate a size or any other style on the image element itself. But with the Injector syntax, we can.
Markup
The Injector uses the curly braces similar to the custom span and div syntax, except injectors use only a single set of braces. And, because an injector is only used to pass it’s own attributes to the preceding element, rather than apply them to some inner content, there is no delimiter between an “attribute area” and the “content” (if I am losing you, read either the span or div articles first). There is no practical use for an empty injector ({ }).
Because an injector is passing it’s attributes to a preceding element, it must come immediately after that target element. In this example, the injector is passing the id “bw-octopus” and the class name “line-art” to the preceding img element:
{#bw-octopus,line-art}<img class="line-art" id="bw-octopus" src="https://i.imgur.com/MioLvv8.jpg" alt="octopus">You could now use CSS selectors to apply styles to this image from the Style Editor– changing the size, or blend mode, or anything else.
If you prefer to set some styles inline, you can do so right in the injector— each item is separated by a comma (no spaces), and if a style property has a value that requires a space within it, it just needs to be wrapped in double quotes:
{#bw-octopus,line-art,width:200px,border:"5px double black"}<img class="line-art" id="bw-octopus" style="width:200px; border:5px double black;" src="https://i.imgur.com/MioLvv8.jpg" alt="octopus">
Sometimes it might not be totally obvious where your injector should be: one the same line in the editor as the previous element, or on the next line? In the below example there is a header with a span inside of it:
## Dark {{scary Jungle}}<h2 id="dark-jungle">Dark <span class="inline-block scary">Jungle</span></h2>If I want to color the entire header (h2) blue, should the injector go at the end of the same line? No, because that would apply the injector to the inner span and only “Jungle” would be colored blue. Instead, place the injector on the line below the header:
## Dark {{scary Jungle}}
{color:blue}<h2 id="dark-jungle" style="color:blue;">Dark <span class="inline-block scary">Jungle</span></h2>
Custom Attributes
You can pass custom attributes beyond just id, class, and style to other elements by using the = in the injector. If you wanted to pass width as an attribute to an img element, rather than setting it via CSS, you would do this:
{width="300"}
// note, this is not the same as {width:300px}<img src="https://i.imgur.com/MioLvv8.jpg" alt="octopus" width="300">
Closing
Injectors are a little different, but they solve a problem: Markdown is very streamlined, but at the expense of the ability to provide much styling/layout direction. Being able to use a Markdown-like, simple syntax to apply identifiers and styling directly to elements makes brew documents easier to read and write them.