Could not load branches. Could not load tags. Latest commit. Git stats commits. Failed to load latest commit information. View code. Auto-compiling pug files Contributions. M-x package-install RET pug-mode require 'pug-mode.
About Pug support for Emacs, based on slim-mode. Topics emacs melpa emacs-mode pug. Releases 5 tags. Sponsor this project. Contributors 5. You signed in with another tab or window. Reload to refresh your session. It will also negate a bunch of potential permissions errors. Once Node and npm are installed on your system, you can install the pug-cli package like so:.
You can check that the install process ran correctly by typing pug --version into a terminal. This will output the version of Pug and the version of the CLI that you have installed. To remedy this, one can install the Sublime Pug package :. Syntax highlighting will make it much easier to work with Pug files, especially those of any length.
CodePen , for example, has Pug support baked right in. Create a new directory named pug-examples and change into it. Then create a further directory called html and a file called index. Windows users would do echo. When it detects any, it will take the contents of index. Note: in the above command, the -w option stands for watch, the dot tells Pug to watch everything in the current directory, -o. Enter the following into index.
Save pug. You should see the following:. This example serves to highlight a couple of important points about Pug. Firstly, it is whitespace sensitive , which means that Pug uses indentation to work out which tags are nested inside each other.
For example:. This will obviously save you a fair few keystrokes and affords Pug a clean and easy-to-read syntax. Pug will do its best to ensure that its output is valid for the document type.
This might take a small amount of getting used to, but once you do, it makes for clean and readable code. By way of an example:. Classes and IDs are expressed using a. Pug also offers us a handy shortcut. For example, you could use JavaScript to include variables in your attributes, or assign an array of values to an attribute. When dealing with large blocks of text, you can just ad a dot. One of the great things about Pug is the ability to run JavaScript in your templates.
This makes it easy to insert variables into our templates, iterate over arrays and objects, conditionally render HTML, and much more. Unbuffered code starts with a minus -. It evaluates a JavaScript expression and outputs the result. String interpolation is the process of replacing one or more placeholders in a template with a corresponding value.
Here, Pug will evaluate any code between the curly brackets, escape it, and render it into the template.
0コメント