forbeslindesay / jade-brackets

Brackets and code-mirror modes for jade

Jade Tools

This repository houses the source code that generates three different tools to help you program in jade:

• jade-brackets: the official jade plugin for the brackets editor
• jade-highlighter: a syntax highlighter for highlighting jade in node.js
• jade-code-mirror: a browserifyable npm library that adds jade support to code-mirror

There's also the raw CodeMirror mode in /lib/mode.js

jade-brackets

This is the official jade plugin for Brackets. Brackets is the recommended editor for jade.

jade-highlighter

A simple syntax highlighter for jade.

Installation

npm install jade-highlighter

Usage

var jade = require('jade-highlighter');

// Optionally register additional languages to highlight filters etc. (by default html, js, css and markdown are supported)
jade.loadMode('java');

// Get the html code produced from highlighting using jade
var html = jade('string of jade code here', {options});

jade-code-mirror

A code mirror mode for jade neatly packaged as a proper little npm module with a peer dependency.

Installation

npm install jade-code-mirror

Usage

var CodeMirror = require('jade-code-mirror');

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  mode: 'jade',
  lineNumbers: true
});

License

MIT

jade-brackets's Issues

Interfere with js default parameter hint

After installing jade-brackets we don't have default javascript parameter hint!

the url of the brackets extension:
https://s3.amazonaws.com/extend.brackets/jade/jade-2.0.0.zip

Tag attribute highlight issue

Whenever a variable name has a "j" character, the name changes color from this character on, like it was interpreted as a space.

Screenshot with example:

I'm using Brackets build 1.1.0-15558 on Ubuntu 14.04 and disabled every other plugin for this test.

Throws errors in a JSX file

When programming in a .jsx file, if I have this code:

'use strict';

let foo = (

);

Everything is fine. However, as soon as I type < within the parenthesis an error is thrown:

jsMode.expressionAllowed is not a function

If I disable only this jade extension, everything is back to working.

For clarity, this is what I try to type:

'use strict';

let foo = (
    <
);

Notice the < difference with the working code above.

Current brackets version (should be latest downloadable from brackets.io):

Release 1.7 build 1.7.0-16898 (release b0a363b71)

Please update this package

brackets v 1.7.x can not install and plz rename to PUG

Highlighting after conditional comment

When you write pug-jade without a conditional comment the highlighting will be ok
But when writing a conditional comment like
head meta(charset='UTF-8') meta(name='viewport' content='width=device-width, initial-scale=1.0') title Modely template include includes/pug/styles <!--[if IE 9]> script(src='js/html5shiv.min.js') script(src='js/respond.min.js') <![endif]--> body include includes/pug/navbar section#welcome

the body and anything after it will be white

<hr/> tags ruin the syntax highlighting

Ignore this.

Error highlighting jade mixin

I'm using jade-highlighter to documenting my jade codes. But when I try to highlight mixin, I always get an error.

This works:

pre
  code
    :jadesrc
      include ../components/mixin/card
      +card-time({ time: "15 mnt", label: "author" })

But this not works:

pre
  code
    :jadesrc
      mixin card-time(data)
        .card__time
          a.card__post-time(href="#") #{data.time}
          a.card__post-label(class="card__post-label-#{data.label}", href="#")
            span #{data.label}

Here's the error message:

{ [TypeError: e:\GitProject\gulpy\source\styleguide\docs-card\index.jade:14
    12|       pre
    13|         code
  > 14|           :jadesrc
    15|             mixin card-time(data)
    16|               .card__time
    17|                 a.card__post-time(href="#") #{data.time}

Cannot read property 'time' of undefined]
  plugin: 'gulp-jade',
  showStack: false,
  name: 'TypeError',
  message: 'e:\\GitProject\\gulpy\\source\\styleguide\\docs-card\\index.jade:14\
n    12|       pre\n    13|         code\n  > 14|
    :jadesrc\n    15|             mixin card-time(data)\n    16|               .
card__time\n    17|                 a.card__post-time(href="#") #{data.time}\n\n
Cannot read property \'time\' of undefined',
  stack: 'TypeError: e:\\GitProject\\gulpy\\source\\styleguide\\docs-card\\index

And here's my configuration:

var jade = require('jade')
jade.filters.jadesrc = require('jade-highlighter');

Looks like jade still compile the mixin and ignore the filter. But in the official documentation (https://github.com/jadejs/jade/blob/gh-pages/src/pages/reference/mixins.jade), the filter seems to work.

code hints

I would like to see code hints for html attributes, style blocks and script blocks in the Jade plug-in.

Configuration for jade-brackets

Hi,
Sorry for the simple question: How do I have to configure jade-brackets to get the html file in a special directory after saving the jade file.

Thanks for any answer
Hobokens

Display Issue with OS X Yosemite and Brackets

Hello,

I've run into an issue with the Jade plugin for Brackets on OS X Yosemite. Please see the screen shots attached.

Screenshot of issue:
https://www.dropbox.com/s/inxarjg6u3gfj0z/Screenshot%202014-10-22%2022.03.55.png?dl=0

Screenshot of debug:
https://www.dropbox.com/s/mv25w8zbovaxe7y/Screenshot%202014-10-23%2009.03.14.png?dl=0

Looks like there is a conflict with the latest version of Brackets?

Thanks!
Rob

Using html tags inside .jade file breaks syntax highlighting

I'm trying to use jade highlighting to write a jade file which is a mixture of jade and html code. The highlighting stops on the first html tag. Example

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) {
         bar(1 + 5)
      }
  body
    <p>Highlighting stops here</p>

    h1 Jade - node template engine
    #container.col
      if youAreUsingJade
        p You are amazing
      else
        p Get on it!

Conditional comment kills syntax highlighting

Hi Forbes, love your work on Jade!

I installed this extension today and noticed that conditional comments (http://jade-lang.com/reference/comments/) causes the rest of the document to lose syntax highlighting.

Example from bootstrap template:

doctype html
html(lang="en")
    head
        meta(charset="utf-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1")

        link(href="/favicon.ico", rel="shortcut icon", type="image/x-icon")
        link(href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css", rel="stylesheet")
        link(href="/stylesheets/style.css", rel="stylesheet")

        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    body
        nav.navbar.navbar-default.navbar-fixed-top(role="navigation")
            div.container-fluid
                div.navbar-header
                    button.navbar-toggle.collapsed(type="button", data-toggle="collapse", data-target="#bs-example-navbar-collapse-1")
                        span.icon-bar
                        span.icon-bar
                        span.icon-bar

Screenshot from Brackets:

Display line number in jade-highlighter

Is it possible to display line number in jade highlighter?

installing from github url

There isn't main.js in the project so jade-brackets can't be installed directly from github url

update this package please

highlight needs improvements

Auto compiling

Could it be possible to intergrate auto compileing, like LESS and SASS has, into this extension aswell? Would be awesome not having to run a seperate program, just to compile my jade

Manual installation with Brackets 0.41 on Windows 7 64 bit - main.js file missing

Hi,

I can't add the extension to Brackets for Windows. Installation with the extension manager results in a connection error.

This is certainly happening because I'm in a company network. I uploaded the zip to a company server and tried to install from there.

Brackets told me that the main.js file is missing. I tested the same process with the emmet extension which has a main.js file and the error does not come up.

I'm not sure if a main.js file is now required but I think so and wanted to give you a heads up.

Kind regards,

Michael

add highlighting support for markdown-it filter

Hi,

I've noticed that when I use the :markdown filter in a jade file, the code underneath gets highlighted according to markdown syntax.
However, when I use markdown-it (and I switched after getting a "soon to be deprecated" message during my build), it is no longer highlighted.

I actually tried to find the place in the code that controls the highlighting but couldn't...

Brackets: 1.3 experimental build 1.3.0-16022 (release cd0a6aae5)
jade-brackets: 2.0.0

Must install jade-brackets locally?

Must this jade-brackets module be installed locally? Not globally? It did not work when I npm i -g jade-highlighter which made my project dir would always have a node_modules dir. It makes me not feel good.

Live edit?

Does this allow Brackets to edit CSS inline?
TIA