Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Introduce Dockerfile mode #2888

Closed
wants to merge 11 commits into from
48 changes: 48 additions & 0 deletions mode/dockerfile/dockerfile.js
@@ -0,0 +1,48 @@
// CodeMirror, copyright (c) by Marijn Haverbeke and others
// Distributed under an MIT license: http://codemirror.net/LICENSE

(function(mod) {
if (typeof exports == "object" && typeof module == "object") // CommonJS
mod(require("../../lib/codemirror"), require("../../addon/mode/simple"));
else if (typeof define == "function" && define.amd) // AMD
define(["../../lib/codemirror", "../../addon/mode/simple"], mod);
else // Plain browser env
mod(CodeMirror);
})(function(CodeMirror) {
"use strict";

// Collect all Dockerfile directives
var instructions = ["from", "maintainer", "run", "cmd", "expose", "env",
"add", "copy", "entrypoint", "volume", "user",
"workdir", "onbuild"],
instructionsRegex = instructions.join('|');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You probably want to add "(" and ")\b" here so that addiction and such (words that start with a directive keyword) don't match.


// Match all Dockerfile directives in a case-insensitive manner
instructionsRegex = new RegExp(instructionsRegex, "i");

CodeMirror.defineSimpleMode("dockerfile", {
start: [
// Block comment
{
regex: /#.*/,
token: "comment"
},
// Directive highlighting
{
regex: instructionsRegex,
token: "variable-2",
next: "remainder"
}
],
remainder: [
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This state looks like it mostly works, but does so by accident. Is the rest of the line after a command always the continuation of the command? What if a line comment starts immediately after a command word? You can include a rule without regex (always matches) that has next: "start" to also go back to start when nothing else matches, but then you might as well make your directive rule immediately consume the text after it (using groups and an array of token styles).

Can directives span multiple lines?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What if a line comment starts immediately after a command word?

This is not valid syntax at the moment. All Dockerfile instructions should be followed by at least one argument, so no line comment can occur right after a Dockerfile instruction.

Can directives span multiple lines?

Yes. Directives can span multiple lines and I mistakenly did not take this into account. Right now I am working on it.

{
// Match everything except for the inline comment
regex: /[^#]+/,
token: null,
next: "start"
}
]
});

CodeMirror.defineMIME("text/x-dockerfile", "dockerfile");
});
72 changes: 72 additions & 0 deletions mode/dockerfile/index.html
@@ -0,0 +1,72 @@
<!doctype html>

<title>CodeMirror: Dockerfile mode</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../../doc/docs.css">

<link rel="stylesheet" href="../../lib/codemirror.css">
<script src="../../lib/codemirror.js"></script>
<script src="../../addon/mode/simple.js"></script>
<script src="dockerfile.js"></script>
<style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
<div id=nav>
<a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png"></a>

<ul>
<li><a href="../../index.html">Home</a>
<li><a href="../../doc/manual.html">Manual</a>
<li><a href="https://github.com/codemirror/codemirror">Code</a>
</ul>
<ul>
<li><a href="../index.html">Language modes</a>
<li><a class=active href="#">Dockerfile</a>
</ul>
</div>

<article>
<h2>Dockerfile mode</h2>
<form><textarea id="code" name="code"># Install Ghost blogging platform and run development environment
#
# VERSION 1.0.0

FROM ubuntu:12.10
MAINTAINER Amer Grgic "amer@livebyt.es"
WORKDIR /data/ghost

# Install dependencies for nginx installation
RUN apt-get update
RUN apt-get install -y python g++ make software-properties-common --force-yes
RUN add-apt-repository ppa:chris-lea/node.js
RUN apt-get update
# Install unzip
RUN apt-get install -y unzip
# Install curl
RUN apt-get install -y curl
# Install nodejs & npm
RUN apt-get install -y rlwrap
RUN apt-get install -y nodejs
# Download Ghost v0.4.1
RUN curl -L https://ghost.org/zip/ghost-latest.zip -o /tmp/ghost.zip
# Unzip Ghost zip to /data/ghost
RUN unzip -uo /tmp/ghost.zip -d /data/ghost
# Add custom config js to /data/ghost
ADD ./config.example.js /data/ghost/config.js
# Install Ghost with NPM
RUN cd /data/ghost/ && npm install --production
# Expose port 2368
EXPOSE 2368
# Run Ghost
CMD ["npm","start"]
</textarea></form>

<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
mode: "dockerfile"
});
</script>

<p>Dockerfile syntac highlighting for CodeMirror.</p>

<p><strong>MIME types defined:</strong> <code>text/x-dockerfile</code></p>
</article>