Add support for custom css

webpro · Apr 13, 2017 · 8574a47 · 8574a47
1 parent d5103f1
commit 8574a47
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -40,6 +40,7 @@ reveal-md demo
 * YAML Front Matter
 * Live Reload
 * Custom Scripts
+* Custom CSS
 * Pre-process Markdown
 * Print to PDF
 * Static Website
@@ -150,7 +151,7 @@ You can define Reveal-md options similar to command-line options in a `reveal-md
 ``` json
 {
   "separator": "^\n\n\n",
-  "verticalSeparator: "^\n\n"
+  "verticalSeparator": "^\n\n"
 }
 ```
 
@@ -197,6 +198,14 @@ Inject custom scripts into the page:
 reveal-md slides.md --scripts script.js,another-script.js
 ```
 
+### Custom CSS
+
+Inject custom CSS into the page:
+
+``` bash
+reveal-md slides.md --css style.css,another-style.css
+```
+
 ### Pre-process Markdown
 
 `reveal-md` can be given a markdown preprocessor script via the `--preprocessor` (or

diff --git a/bin/cli.js b/bin/cli.js
@@ -12,6 +12,7 @@ program
   .option('-H, --highlight-theme <theme>', `Highlight theme [${defaults.highlightTheme}]`, defaults.highlightTheme)
   .option('-h, --host <host>', `Host [${defaults.host}]`, defaults.host)
   .option('-i, --scripts <scripts>', 'Scripts to inject into the page', defaults.scripts)
+  .option('-c, --css <css>', 'CSS files to inject into the page', defaults.css)
   .option('-m, --preprocessor <script>', 'Markdown preprocessor script', defaults.preprocessor)
   .option('-p, --port <port>', `Port [${defaults.port}]`, defaults.port)
   .option('-P, --print [filename]', 'Print', defaults.print)

diff --git a/lib/defaults.json b/lib/defaults.json
@@ -3,6 +3,7 @@
   "highlightTheme": "zenburn",
   "host": "localhost",
   "scripts": [],
+  "css": [],
   "preprocessor": false,
   "port": 1948,
   "print": false,

diff --git a/lib/options.js b/lib/options.js
@@ -97,6 +97,7 @@ const optionList = [
   'preprocessor',
   'revealOptions',
   'scripts',
+  'css',
   'separator',
   'static',
   'theme',
@@ -114,6 +115,8 @@ function parseOptions(args) {
   options.themePath = parseThemeArg(args.theme || defaults.theme);
   options.scriptPaths = parseScriptsArg(args.scripts);
   options.scriptSources = parseScriptsPath(args.scripts);
+  options.cssPaths = parseScriptsArg(args.css);
+  options.cssSources = parseScriptsPath(args.css);
   options.title = args.title || defaults.title;
   options.separator = args.separator || defaults.separator;
   options.verticalSeparator = args.verticalSeparator || defaults.verticalSeparator;

diff --git a/lib/static.js b/lib/static.js
@@ -28,6 +28,13 @@ module.exports = function renderStaticMarkup(options) {
     awaits.concat(scriptAwaits);
   }
 
+  if(!_.isEmpty(options.css)) {
+    const scriptsDir = path.join(targetPath, 'scripts');
+    fs.ensureDirSync(scriptsDir);
+    const scriptAwaits = options.cssSources.map(scriptFile => fs.copyAsync(scriptFile.path, path.join(scriptsDir, scriptFile.name)));
+    awaits.concat(scriptAwaits);
+  }
+
   Promise.all(awaits).then(() => console.log(`Wrote static site to ${targetPath}`)).catch(console.error);
 
 };
diff --git a/lib/template/reveal.html b/lib/template/reveal.html
@@ -7,6 +7,9 @@
         <link rel="stylesheet" href="{{{themeUrl}}}" id="theme">
         <link rel="stylesheet" href="{{{highlightThemeUrl}}}">
         <link rel="stylesheet" href="{{{base}}}/css/print/{{#print}}pdf{{/print}}{{^print}}paper{{/print}}.css" type="text/css" media="print">
+        {{#cssPaths}}
+          <link rel="stylesheet" href="{{{base}}}/{{{.}}}">
+        {{/cssPaths}}
 
         {{#watch}}
 		<script>

diff --git a/test/render.spec.js b/test/render.spec.js
@@ -29,6 +29,18 @@ describe('render', () => {
     expect(actual).toInclude('<script src="./scripts/also.js"></script>');
   });
 
+  it('should render custom css after theme', () => {
+    const actual = render.render('# header', {css: 'style1.css,style2.css'});
+    const themeLink = '<link rel="stylesheet" href="./css/highlight/zenburn.css">';
+    const style1Link = '<link rel="stylesheet" href="./scripts/style1.css">';
+    const style2Link = '<link rel="stylesheet" href="./scripts/style2.css">';
+    expect(actual).toInclude(themeLink);
+    expect(actual).toInclude(style1Link);
+    expect(actual).toInclude(style2Link);
+    expect(actual.indexOf(style1Link)).toBeGreaterThan(actual.indexOf(themeLink))
+    expect(actual.indexOf(style2Link)).toBeGreaterThan(actual.indexOf(style1Link))
+  });
+
   it('should render print stylesheet', () => {
     const actual = render.render('', {print: true});
     expect(actual).toInclude('<link rel="stylesheet" href="./css/print/pdf.css" type="text/css" media="print">');