在线时加载css

生成html时css作为inline样式处理

在线时加载css
生成html时css作为inline样式处理
lintry
Commit 202c4cbc3b501d38c801ada11ec17905ee2c4dcb 202c4cbc 1 parent 3fcd647b
Showing 6 changed files with 73 additions and 31 deletions
bin/mdview
lib/md-action.js
lib/view-markdown.js
package.json
src/index.ejs
src/inline-index.ejs
--- a/bin/mdview
View file @202c4cb
+++ b/bin/mdview
View file @202c4cb
@@ -15,14 +15,12 @@ program
     .alias('e')
     .description('export markdown to html')
     .option('-A --abstract', 'abstract to current path')
-    .action(function (md, html, options) {
+    .action(function (md, html) {
         //判断目标输出参数
         if (!fs.existsSync(md)) {
             console.error(chalk.red(md + ' is not found'));
             return
         }
-        let relative_path = '';
-        let abstract = options.abstract;
         let default_name = path.parse(md).name + '.html';
         if (!html) {
             html = md.replace(/\.md$/g, '') + '.html'
@@ -33,11 +31,8 @@ program
         }
         let output = path.resolve(process.cwd(), html);
         fs.ensureFileSync(output);
-        if (!abstract) {
+
-            // 默认使用相对的资源路径
+        const viewer = new (require('../lib/view-markdown'))(process.cwd(), {inline: true});
-            relative_path = path.relative(path.dirname(output), 'themes');
-        }
-        const viewer = new (require('../lib/view-markdown'))(process.cwd(), {relative_path: relative_path});
         let result = viewer.render(md, 'metro-lake');
         fs.writeFile(output, result);
--- a/lib/md-action.js
View file @202c4cb
+++ b/lib/md-action.js
View file @202c4cb
@@ -9,7 +9,8 @@ const _ = require('lodash'),
     path = require('path'),
     express = require('express'),
     router = express.Router(),
-    config = global.config
+    config = global.config,
+    fs = require('fs-extra')
 ;
 /**
@@ -53,7 +54,9 @@ function MdAction (alias_name, md_path) {
             return next();
         }
-        res.send(viewer.render(urls[1], query.t));
+        let html = viewer.render(urls[1], query.t);
+        res.send(html)
+
     });
     //加载文档目录为静态页，别名为空时指向根路径
     router.use(alias || '/', express.static(doc_path));
--- a/lib/view-markdown.js
View file @202c4cb
+++ b/lib/view-markdown.js
View file @202c4cb
@@ -3,7 +3,10 @@
  * Created by lintry on 2018/1/9.
  */
-const path = require('path');
+const path = require('path'),
+    fs = require('fs-extra'),
+    ejs = require('ejs'),
+    juice = require('juice');
 class ViewMarkdown {
@@ -42,29 +45,32 @@ class ViewMarkdown {
         let result = this.mdviewer.renderFile(file);
         let tittle = result.tokens && result.tokens[1] && result.tokens[1].content || filename;
         theme = theme || options.theme || '';
-        let relative_path = this.options.relative_path || '';
         let content = result.status === 404 ? this.mdviewer.render(`
 # 404
 > **${filename}不存在**
 `)
             : result.html;
-        return `
+
-    <!DOCTYPE html>
+        let inline = this.options.inline;
-    <html>
+        const template = fs.readFileSync(path.resolve(process.cwd(), (inline) ? 'src/inline-index.ejs' : 'src/index.ejs'), 'utf8');
-        <head>
+        let html = ejs.render(template, {
-            <meta charset=utf-8>
+            tittle,
-            <title>${tittle}</title>
+            theme,
-            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            content
-            <link rel="stylesheet" href="${relative_path}/markdown.css">
+        }, {
-            <link rel="stylesheet" href="${relative_path}/${theme}/${theme}.css">
+            root: process.cwd()
-        </head>
+        });
-        <body>
+
-        <div class='markdown ${theme}'>
+        if (inline) {
-        ${content}
+            let css = [
-        </div>
+                fs.readFileSync(path.resolve(process.cwd(), 'themes/markdown.css'), 'utf8'),
-        </body
+                fs.readFileSync(path.resolve(process.cwd(), 'themes', theme, theme + '.css'), 'utf8')
-    </html>
+            ].join('\n');
-`;
+            html = juice.inlineContent(html, css);
+        }
+
+        return html
+
     }
 }
--- a/package.json
View file @202c4cb
+++ b/package.json
View file @202c4cb
 {
   "name": "markdown-view",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "start": "node server",
+    "build": "cross-env node build/build.js",
+    "export": "cross-env webpack --config build/webpack.base.conf.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "bin": {
@@ -16,11 +18,15 @@
   "dependencies": {
     "chalk": "^2.3.1",
     "commander": "^2.14.1",
+    "cross-env": "^5.1.3",
+    "ejs": "^2.5.7",
     "express": "^4.16.2",
     "fs-extra": "^5.0.0",
     "github-markdown-css": "^2.10.0",
+    "juice": "^4.2.2",
     "kml-customize": "git+ssh://git@gitlab.kmlab.com/comm/customize.git#1.0.0",
     "markdown-it": "^8.4.0",
     "markdown-it-github-toc": "^3.2.4"
-  }
+  },
+  "devDependencies": {}
 }
--- a/src/index.ejs 0 → 100644
View file @202c4cb
+++ b/src/index.ejs 0 → 100644
View file @202c4cb
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset=utf-8>
+    <title>
+        <%= tittle %>
+    </title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/markdown.css">
+    <link rel="stylesheet" href="<%- '/' + theme + '/' + theme + '.css'%>">
+</head>
+<body>
+<div class='markdown <%= theme %>'>
+    <%- content %>
+</div>
+</body>
+</html>
\ No newline at end of file
--- a/src/inline-index.ejs 0 → 100644
View file @202c4cb
+++ b/src/inline-index.ejs 0 → 100644
View file @202c4cb
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset=utf-8>
+    <title>
+        <%= tittle %>
+    </title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+<div class='markdown <%= theme %>'>
+    <%- content %>
+</div>
+</body>
+</html>
\ No newline at end of file