Shenlin / markdown-view

Go to a project
Toggle navigation Toggle navigation pinning
lintry
202c4cbc 1 parent 3fcd647b

在线时加载css 

生成html时css作为inline样式处理
Inline Side-by-side
Showing 6 changed files with 73 additions and 31 deletions
......@@ -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) {
// 默认使用相对的资源路径
relative_path = path.relative(path.dirname(output), 'themes');
}
const viewer = new (require('../lib/view-markdown'))(process.cwd(), {relative_path: relative_path});
const viewer = new (require('../lib/view-markdown'))(process.cwd(), {inline: true});
let result = viewer.render(md, 'metro-lake');
fs.writeFile(output, result);
......
......@@ -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));
......
......@@ -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>
<html>
<head>
<meta charset=utf-8>
<title>${tittle}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="${relative_path}/markdown.css">
<link rel="stylesheet" href="${relative_path}/${theme}/${theme}.css">
</head>
<body>
<div class='markdown ${theme}'>
${content}
</div>
</body
</html>
`;
let inline = this.options.inline;
const template = fs.readFileSync(path.resolve(process.cwd(), (inline) ? 'src/inline-index.ejs' : 'src/index.ejs'), 'utf8');
let html = ejs.render(template, {
tittle,
theme,
content
}, {
root: process.cwd()
});
if (inline) {
let css = [
fs.readFileSync(path.resolve(process.cwd(), 'themes/markdown.css'), 'utf8'),
fs.readFileSync(path.resolve(process.cwd(), 'themes', theme, theme + '.css'), 'utf8')
].join('\n');
html = juice.inlineContent(html, css);
}
return html
}
}
......
{
"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": {}
}
......
<!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
<!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