How to set grammar for pane programmatically?


I’m creating a package that allows an editor’s contents to be parsed and the result displayed in a separate pane, very much like the Markdown Preview package (in fact, I’ve modeled it closely after that package).

It’s going well, and I convert each line of the result into HTML text to be displayed in the viewer, then update the view’s contents with the whole result.

PreviewView inherits ScrollView (snippet)

grammar = atom.syntax.selectGrammar('foo.css', css)
tokenizedCss = grammar.tokenizeLines(css)
html = $('<div></div>')

for line in tokenizedCss
  lineText = _.pluck(line, 'value').join('')
  htmlEolInvisibles = ''
  html.append(EditorView.buildLineHtml({tokens: line, text: lineText, htmlEolInvisibles}))


The pane displays the content (in this case, it’s CSS), but the text is unstyled. I’d like to show this with highlighted syntax, as it would be if they opened the file in a normal editor pane.

I suspect the issue is that ScrollView is not the appropriate class to inherit from for this, and that if I wanted the CSS highlighted as is, I’d have to supply my own stylesheet. I’d like to avoid that and use syntax stylesheet that’s already included with Atom.


  1. Can I set the syntax programmatically from ScrollView to achieve what I want do
  2. If not, can I include an existing package’s stylesheet into my view to achieve syntax highlighting
  3. If neither, what should I do?