Doghouse

for Reveal.js

Doghouse is a plugin for Reveal.js 4 that will render Pug codeblocks when it starts, but it also works with live editing, which makes it great for presentations about Pug.

Doghouse uses the standalone, latest version of Pug (as described here: github.com/pugjs/pug). To avoid needing to use DogPack and get all kinds of issues with importers and modules, this plugin uses Require.js.

Doghouse also works well with some of my other plugins: Appearance, Verticator and Simplemenu.

Let's check out what Doghouse does:

Example

Dogtags Tags

Text at the start of a line (or after only white space) represents an HTML tag. Pug automatically closes the tag when compiling.

a
div
ul
ol
li

Some kinds of tags are self-closing. This is automatically resolved.

img
hr
meta
link

Tag content

The first word of a block of Pug is the name of the tag. Any following words on that same line will be considered as the content of that tag.

div The dog is in the dog house
p The dog is on a leash

Indents

To make a nested structure, Pug uses indents to separate the levels. You can use either tabs or spaces, but not both at the same time in a single file.

div
    div
        h3 Who let the dogs out?

To make it even denser, use colons instead of indents.

div: div: h3 Who let the dogs out?

Inline variables

As a long as a variable is defined before use, it will render fine. You can use placeholders or assign the variable to a tag.

- let bark = "woooof";
p The dog says #{bark}
p= `The dog says ${bark}`
p= bark

Object and array variables

Local variables can be assigned in advance, or read from a database. Pug can read any JavaScript object or array format.

{"names": {"small": "Choco", "large": "Hector"}}

p My dog is called #{names.small}.
p The neighbors also have a dog. It is called #{names.large}.

Code

Pug allows inline JavaScript code for conditions and other logic.

- let uglydog = true
if uglydog
    h3 You ain’t nothin’ but a hound dog, cryin’ all the time
    h4=uglydog
if uglydog == false 
    h4 Nice doggie

Iteration

You can use either ‘each’ or ‘while’ for iteration.

ul
    each dog in ["Chichuahua", "Great dane", "German shepherd"]
        li=dog

Basic attributes

a A barking dog never bites

So where do you put the href and such?

As the first word is reserved for the tag, Pug uses parentheses for the attributes.

a(href="http://w.wiki/89" target="_blank") A barking dog never bites

You can use commas, and put attributes on new lines if you like.

a(
    href="http://w.wiki/89",
    target="_blank"
    ) A barking dog never bites

Disclaimer

I am not affiliated with the creators of Pug. I also do not have a dog.