Syntax highlight for .ejs files in vim

Question

What is the best way to make vim highlight ejs (http://embeddedjs.com/) files? Is it possible to set up html highlight for the file in general and javascript highlight to it's parts inside <% %>? Appreciate your help!

Answer 1

Credits goes to @inkedmn just wanted to point out that html binding works way better, therefore put this in your ~/.vimrc file:

au BufNewFile,BufRead *.ejs set filetype=html

Answer 2

Here's something I whipped up today (made some modifications to the eruby script). It requires the vim-javascript plugin to be installed.

https://github.com/briancollins/vim-jst

Answer 3

I've had the best results downloading this syntax file directly into ~/.vim/syntax

Answer 4

For a solution that uses javascript and html syntax where appropriate (and not rely on any third-party javascript plugins) you need an ftdetect file which runs autocmd when files with the .ejs extension are loaded combined with an ejs syntax file.

If you're not concerned with how it works I've put a package together than you can grab from github here. If using Vundle just add this to your .vimrc:

Bundle 'nikvdp/ejs-syntax'

To do it yourself, create two files in your ~/.vim folder:

An ftdetect file: ~/.vim/ftdetect/ejs.vim:

autocmd BufNewFile,BufRead *.ejs set filetype=ejs
autocmd BufNewFile,BufRead *._ejs set filetype=ejs

function! s:DetectEjs()
    if getline(1) =~ '^#!.*\<ejs\>'
        set filetype=ejs
    endif
endfunction

autocmd BufNewFile,BufRead * call s:DetectEjs()

And a syntax file (from user456584's answer) : ~/.vim/syntax/ejs.vim

runtime! syntax/html.vim
unlet b:current_syntax

" Include Java syntax
syn include @ejsJavaScript syntax/javascript.vim

syn region ejsScriptlet matchgroup=ejsTag start=/<%/  keepend end=/%>/ contains=@ejsJavaScript
syn region ejsExpr  matchgroup=ejsTag start=/<%=/ keepend end=/%>/ contains=@ejsJavaScript

" Redefine htmlTag so that it can contain jspExpr
syn clear htmlTag
syn region htmlTag start=+<[^/%]+ end=+>+ contains=htmlTagN,htmlString,htmlArg,htmlValue,htmlTagError,htmlEvent,htmlCssDefinition,@htmlPreproc,@htmlArgCluster,ejsExpr,javaScript


" syn keyword ejsPrint contained print
syn match javaScriptType        /\<\zsvars\ze\./
syn match javaScriptSpecial     /\<\zsexports\ze\./
syn match javaScriptFunction    /\<\zsprint\ze(/
syn match javaScriptFunction    /\<\zsinclude\ze(/
syn match javaScriptFunction    /\<\zsincludeObject\ze(/
syn match javaScriptFunction    /\<\zsfetch\ze(/
syn match javaScriptFunction    /\<\zsfetchObject\ze(/

command -nargs=+ HiLink hi def link <args>
HiLink  ejsTag      htmlTag
delcommand HiLink

let b:current_syntax = "ejs"

Answer 5

If you want them to be highlighted like regular .js files, you could add this to your .vimrc:

au BufNewFile,BufRead *.ejs set filetype=js

Not 100% sure that's what you're after - hope it helps.

Answer 6

try this

cd /usr/share/vim/vim74/syntax #maybe vim64 or other
cp html.vim ejs.vim
vim ejs.vim

you can just edit html.vim but I suggest you not... then find

syn region  javaScript start=+<script\_[^>]*>+ keepend end=+</script>+me=s-1` contains=@htmlJavaScript,htmlCssStyleComment,htmlScriptTag,@htmlPreproc

and write

  syn region  ejsScript start=+<%+ keepend end=+%>+ contains=@htmlJavaScript,htmlCssStyleComment,htmlScriptTag,@htmlPreproc

under that line.

find

  HtmlHiLink javaScript             Special

add

  HtmlHiLink ejsScript             Special

under it

add this line to your ~/.vimrc

au BufNewFile,BufRead *.ejs set filetype=ejs

now your ejs code will looks like js code... or you just want it looks like something else?

replase

  HtmlHiLink ejsScript             Special

by (for example)

 hi def ejsScript                 term=bold cterm=bold gui=bold

in fact, in this example,the two line can live together...

it makes your code lovely~

you can read this to help you with your vim-syntax