Compare commits
17 Commits
| Author | SHA1 | Date |
|---|---|---|
pandao
|
c1a8672f89 | 6 years ago |
|
pandao
|
23c32da708 | 6 years ago |
|
pandao
|
f632b1cf53 | 6 years ago |
|
pandao
|
8cfdb6831b | 6 years ago |
|
pandao
|
e8eb6b094b | 6 years ago |
|
pandao
|
1008e2ced9 | 6 years ago |
|
pandao
|
506472d3aa | 6 years ago |
|
pandao
|
0c04086855 | 6 years ago |
|
pandao
|
f58fc10aec | 6 years ago |
|
pandao
|
79d1d57188 | 6 years ago |
|
pandao
|
7b2cec6c35 | 6 years ago |
|
pandao
|
af2a0cceba | 6 years ago |
|
pandao
|
6f37e5a933 | 6 years ago |
|
pandao
|
7f04b34c6c | 6 years ago |
|
pandao
|
5b730587bd | 6 years ago |
|
pandao
|
469bf2cd7f | 6 years ago |
|
pandao
|
6704d47869 | 6 years ago |
58 changed files with 26027 additions and 25367 deletions
@ -0,0 +1,9 @@ |
|||
root = true |
|||
|
|||
[*] |
|||
charset = utf-8 |
|||
indent_style = space |
|||
indent_size = 4 |
|||
end_of_line = lf |
|||
insert_final_newline = true |
|||
trim_trailing_whitespace = true |
|||
@ -1,342 +1,342 @@ |
|||
"use strict"; |
|||
|
|||
var os = require("os"); |
|||
var gulp = require("gulp"); |
|||
var gutil = require("gulp-util"); |
|||
var sass = require("gulp-ruby-sass"); |
|||
var jshint = require("gulp-jshint"); |
|||
var uglify = require("gulp-uglifyjs"); |
|||
var rename = require("gulp-rename"); |
|||
var concat = require("gulp-concat"); |
|||
var notify = require("gulp-notify"); |
|||
var header = require("gulp-header"); |
|||
var minifycss = require("gulp-minify-css"); |
|||
//var jsdoc = require("gulp-jsdoc");
|
|||
//var jsdoc2md = require("gulp-jsdoc-to-markdown");
|
|||
var pkg = require("./package.json"); |
|||
var dateFormat = require("dateformatter").format; |
|||
var replace = require("gulp-replace"); |
|||
|
|||
pkg.name = "Editor.md"; |
|||
pkg.today = dateFormat; |
|||
|
|||
var headerComment = ["/*", |
|||
" * <%= pkg.name %>", |
|||
" *", |
|||
" * @file <%= fileName(file) %> ", |
|||
" * @version v<%= pkg.version %> ", |
|||
" * @description <%= pkg.description %>", |
|||
" * @license MIT License", |
|||
" * @author <%= pkg.author %>", |
|||
" * {@link <%= pkg.homepage %>}", |
|||
" * @updateTime <%= pkg.today('Y-m-d') %>", |
|||
" */", |
|||
"\r\n"].join("\r\n"); |
|||
|
|||
var headerMiniComment = "/*! <%= pkg.name %> v<%= pkg.version %> | <%= fileName(file) %> | <%= pkg.description %> | MIT License | By: <%= pkg.author %> | <%= pkg.homepage %> | <%=pkg.today('Y-m-d') %> */\r\n"; |
|||
|
|||
var scssTask = function(fileName, path) { |
|||
|
|||
path = path || "scss/"; |
|||
|
|||
var distPath = "css"; |
|||
|
|||
return sass(path + fileName + ".scss", { style: "expanded", sourcemap: false, noCache : true }) |
|||
.pipe(gulp.dest(distPath)) |
|||
.pipe(header(headerComment, {pkg : pkg, fileName : function(file) { |
|||
var name = file.path.split(file.base); |
|||
return name[1].replace("\\", ""); |
|||
}})) |
|||
.pipe(gulp.dest(distPath)) |
|||
.pipe(rename({ suffix: ".min" })) |
|||
.pipe(gulp.dest(distPath)) |
|||
.pipe(minifycss()) |
|||
.pipe(gulp.dest(distPath)) |
|||
.pipe(header(headerMiniComment, {pkg : pkg, fileName : function(file) { |
|||
var name = file.path.split(file.base); |
|||
return name[1].replace("\\", ""); |
|||
}})) |
|||
.pipe(gulp.dest(distPath)) |
|||
.pipe(notify({ message: fileName + ".scss task completed!" })); |
|||
}; |
|||
|
|||
gulp.task("scss", function() { |
|||
return scssTask("editormd"); |
|||
}); |
|||
|
|||
gulp.task("scss2", function() { |
|||
return scssTask("editormd.preview"); |
|||
}); |
|||
|
|||
gulp.task("scss3", function() { |
|||
return scssTask("editormd.logo"); |
|||
}); |
|||
|
|||
gulp.task("js", function() { |
|||
return gulp.src("./src/editormd.js") |
|||
.pipe(jshint("./.jshintrc")) |
|||
.pipe(jshint.reporter("default")) |
|||
.pipe(header(headerComment, {pkg : pkg, fileName : function(file) { |
|||
var name = file.path.split(file.base); |
|||
return name[1].replace(/[\\\/]?/, ""); |
|||
}})) |
|||
.pipe(gulp.dest("./")) |
|||
.pipe(rename({ suffix: ".min" })) |
|||
.pipe(uglify()) // {outSourceMap: true, sourceRoot: './'}
|
|||
.pipe(gulp.dest("./")) |
|||
.pipe(header(headerMiniComment, {pkg : pkg, fileName : function(file) { |
|||
var name = file.path.split(file.base + ( (os.platform() === "win32") ? "\\" : "/") ); |
|||
return name[1].replace(/[\\\/]?/, ""); |
|||
}})) |
|||
.pipe(gulp.dest("./")) |
|||
.pipe(notify({ message: "editormd.js task complete" })); |
|||
}); |
|||
|
|||
gulp.task("amd", function() { |
|||
var replaceText1 = [ |
|||
'var cmModePath = "codemirror/mode/";', |
|||
' var cmAddonPath = "codemirror/addon/";', |
|||
'', |
|||
' var codeMirrorModules = [', |
|||
' "jquery", "marked", "prettify",', |
|||
' "katex", "raphael", "underscore", "flowchart", "jqueryflowchart", "sequenceDiagram",', |
|||
'', |
|||
' "codemirror/lib/codemirror",', |
|||
' cmModePath + "css/css",', |
|||
' cmModePath + "sass/sass",', |
|||
' cmModePath + "shell/shell",', |
|||
' cmModePath + "sql/sql",', |
|||
' cmModePath + "clike/clike",', |
|||
' cmModePath + "php/php",', |
|||
' cmModePath + "xml/xml",', |
|||
' cmModePath + "markdown/markdown",', |
|||
' cmModePath + "javascript/javascript",', |
|||
' cmModePath + "htmlmixed/htmlmixed",', |
|||
' cmModePath + "gfm/gfm",', |
|||
' cmModePath + "http/http",', |
|||
' cmModePath + "go/go",', |
|||
' cmModePath + "dart/dart",', |
|||
' cmModePath + "coffeescript/coffeescript",', |
|||
' cmModePath + "nginx/nginx",', |
|||
' cmModePath + "python/python",', |
|||
' cmModePath + "perl/perl",', |
|||
' cmModePath + "lua/lua",', |
|||
' cmModePath + "r/r", ', |
|||
' cmModePath + "ruby/ruby", ', |
|||
' cmModePath + "rst/rst",', |
|||
' cmModePath + "smartymixed/smartymixed",', |
|||
' cmModePath + "vb/vb",', |
|||
' cmModePath + "vbscript/vbscript",', |
|||
' cmModePath + "velocity/velocity",', |
|||
' cmModePath + "xquery/xquery",', |
|||
' cmModePath + "yaml/yaml",', |
|||
' cmModePath + "erlang/erlang",', |
|||
' cmModePath + "jade/jade",', |
|||
'', |
|||
' cmAddonPath + "edit/trailingspace", ', |
|||
' cmAddonPath + "dialog/dialog", ', |
|||
' cmAddonPath + "search/searchcursor", ', |
|||
' cmAddonPath + "search/search", ', |
|||
' cmAddonPath + "scroll/annotatescrollbar", ', |
|||
' cmAddonPath + "search/matchesonscrollbar", ', |
|||
' cmAddonPath + "display/placeholder", ', |
|||
' cmAddonPath + "edit/closetag", ', |
|||
' cmAddonPath + "fold/foldcode",', |
|||
' cmAddonPath + "fold/foldgutter",', |
|||
' cmAddonPath + "fold/indent-fold",', |
|||
' cmAddonPath + "fold/brace-fold",', |
|||
' cmAddonPath + "fold/xml-fold", ', |
|||
' cmAddonPath + "fold/markdown-fold",', |
|||
' cmAddonPath + "fold/comment-fold", ', |
|||
' cmAddonPath + "mode/overlay", ', |
|||
' cmAddonPath + "selection/active-line", ', |
|||
' cmAddonPath + "edit/closebrackets", ', |
|||
' cmAddonPath + "display/fullscreen",', |
|||
' cmAddonPath + "search/match-highlighter"', |
|||
' ];', |
|||
'', |
|||
' define(codeMirrorModules, factory);' |
|||
].join("\r\n"); |
|||
|
|||
var replaceText2 = [ |
|||
"if (typeof define == \"function\" && define.amd) {", |
|||
" $ = arguments[0];", |
|||
" marked = arguments[1];", |
|||
" prettify = arguments[2];", |
|||
" katex = arguments[3];", |
|||
" Raphael = arguments[4];", |
|||
" _ = arguments[5];", |
|||
" flowchart = arguments[6];", |
|||
" CodeMirror = arguments[9];", |
|||
" }" |
|||
].join("\r\n"); |
|||
|
|||
gulp.src("src/editormd.js") |
|||
.pipe(rename({ suffix: ".amd" })) |
|||
.pipe(gulp.dest('./')) |
|||
.pipe(header(headerComment, {pkg : pkg, fileName : function(file) { |
|||
var name = file.path.split(file.base); |
|||
return name[1].replace(/[\\\/]?/, ""); |
|||
}})) |
|||
.pipe(gulp.dest("./")) |
|||
.pipe(replace("/* Require.js define replace */", replaceText1)) |
|||
.pipe(gulp.dest('./')) |
|||
.pipe(replace("/* Require.js assignment replace */", replaceText2)) |
|||
.pipe(gulp.dest('./')) |
|||
.pipe(rename({ suffix: ".min" })) |
|||
.pipe(uglify()) //{outSourceMap: true, sourceRoot: './'}
|
|||
.pipe(gulp.dest("./")) |
|||
.pipe(header(headerMiniComment, {pkg : pkg, fileName : function(file) { |
|||
var name = file.path.split(file.base + ( (os.platform() === "win32") ? "\\" : "/") ); |
|||
return name[1].replace(/[\\\/]?/, ""); |
|||
}})) |
|||
.pipe(gulp.dest("./")) |
|||
.pipe(notify({ message: "amd version task complete"})); |
|||
}); |
|||
|
|||
|
|||
var codeMirror = { |
|||
path : { |
|||
src : { |
|||
mode : "lib/codemirror/mode", |
|||
addon : "lib/codemirror/addon" |
|||
}, |
|||
dist : "lib/codemirror" |
|||
}, |
|||
modes : [ |
|||
"css", |
|||
"sass", |
|||
"shell", |
|||
"sql", |
|||
"clike", |
|||
"php", |
|||
"xml", |
|||
"markdown", |
|||
"javascript", |
|||
"htmlmixed", |
|||
"gfm", |
|||
"http", |
|||
"go", |
|||
"dart", |
|||
"coffeescript", |
|||
"nginx", |
|||
"python", |
|||
"perl", |
|||
"lua", |
|||
"r", |
|||
"ruby", |
|||
"rst", |
|||
"smartymixed", |
|||
"vb", |
|||
"vbscript", |
|||
"velocity", |
|||
"xquery", |
|||
"yaml", |
|||
"erlang", |
|||
"jade", |
|||
], |
|||
|
|||
addons : [ |
|||
"edit/trailingspace", |
|||
"dialog/dialog", |
|||
"search/searchcursor", |
|||
"search/search", |
|||
"scroll/annotatescrollbar", |
|||
"search/matchesonscrollbar", |
|||
"display/placeholder", |
|||
"edit/closetag", |
|||
"fold/foldcode", |
|||
"fold/foldgutter", |
|||
"fold/indent-fold", |
|||
"fold/brace-fold", |
|||
"fold/xml-fold", |
|||
"fold/markdown-fold", |
|||
"fold/comment-fold", |
|||
"mode/overlay", |
|||
"selection/active-line", |
|||
"edit/closebrackets", |
|||
"display/fullscreen", |
|||
"search/match-highlighter" |
|||
] |
|||
}; |
|||
|
|||
gulp.task("cm-mode", function() { |
|||
|
|||
var modes = [ |
|||
codeMirror.path.src.mode + "/meta.js" |
|||
]; |
|||
|
|||
for(var i in codeMirror.modes) { |
|||
var mode = codeMirror.modes[i]; |
|||
modes.push(codeMirror.path.src.mode + "/" + mode + "/" + mode + ".js"); |
|||
} |
|||
|
|||
return gulp.src(modes) |
|||
.pipe(concat("modes.min.js")) |
|||
.pipe(gulp.dest(codeMirror.path.dist)) |
|||
.pipe(uglify()) // {outSourceMap: true, sourceRoot: codeMirror.path.dist}
|
|||
.pipe(gulp.dest(codeMirror.path.dist)) |
|||
.pipe(header(headerMiniComment, {pkg : pkg, fileName : function(file) { |
|||
var name = file.path.split(file.base + "\\"); |
|||
return (name[1]?name[1]:name[0]).replace(/\\/g, ""); |
|||
}})) |
|||
.pipe(gulp.dest(codeMirror.path.dist)) |
|||
.pipe(notify({ message: "codemirror-mode task complete!" })); |
|||
}); |
|||
|
|||
gulp.task("cm-addon", function() { |
|||
|
|||
var addons = []; |
|||
|
|||
for(var i in codeMirror.addons) { |
|||
var addon = codeMirror.addons[i]; |
|||
addons.push(codeMirror.path.src.addon + "/" + addon + ".js"); |
|||
} |
|||
|
|||
return gulp.src(addons) |
|||
.pipe(concat("addons.min.js")) |
|||
.pipe(gulp.dest(codeMirror.path.dist)) |
|||
.pipe(uglify()) //{outSourceMap: true, sourceRoot: codeMirror.path.dist}
|
|||
.pipe(gulp.dest(codeMirror.path.dist)) |
|||
.pipe(header(headerMiniComment, {pkg : pkg, fileName : function(file) { |
|||
var name = file.path.split(file.base + "\\"); |
|||
return (name[1]?name[1]:name[0]).replace(/\\/g, ""); |
|||
}})) |
|||
.pipe(gulp.dest(codeMirror.path.dist)) |
|||
.pipe(notify({ message: "codemirror-addon.js task complete" })); |
|||
}); |
|||
/* |
|||
gulp.task("jsdoc", function(){ |
|||
return gulp.src(["./src/editormd.js", "README.md"]) |
|||
.pipe(jsdoc.parser()) |
|||
.pipe(jsdoc.generator("./docs/html")); |
|||
}); |
|||
|
|||
gulp.task("jsdoc2md", function() { |
|||
return gulp.src("src/js/editormd.js") |
|||
.pipe(jsdoc2md()) |
|||
.on("error", function(err){ |
|||
gutil.log(gutil.colors.red("jsdoc2md failed"), err.message); |
|||
}) |
|||
.pipe(rename(function(path) { |
|||
path.extname = ".md"; |
|||
})) |
|||
.pipe(gulp.dest("docs/markdown")); |
|||
}); |
|||
*/ |
|||
gulp.task("watch", function() { |
|||
gulp.watch("scss/editormd.scss", ["scss"]); |
|||
gulp.watch("scss/editormd.preview.scss", ["scss", "scss2"]); |
|||
gulp.watch("scss/editormd.logo.scss", ["scss", "scss3"]); |
|||
gulp.watch("src/editormd.js", ["js", "amd"]); |
|||
}); |
|||
|
|||
gulp.task("default", function() { |
|||
gulp.run("scss"); |
|||
gulp.run("scss2"); |
|||
gulp.run("scss3"); |
|||
gulp.run("js"); |
|||
gulp.run("amd"); |
|||
gulp.run("cm-addon"); |
|||
gulp.run("cm-mode"); |
|||
}); |
|||
"use strict"; |
|||
|
|||
var os = require("os"); |
|||
var gulp = require("gulp"); |
|||
var gutil = require("gulp-util"); |
|||
var sass = require("gulp-ruby-sass"); |
|||
var jshint = require("gulp-jshint"); |
|||
var uglify = require("gulp-uglifyjs"); |
|||
var rename = require("gulp-rename"); |
|||
var concat = require("gulp-concat"); |
|||
var notify = require("gulp-notify"); |
|||
var header = require("gulp-header"); |
|||
var minifycss = require("gulp-minify-css"); |
|||
//var jsdoc = require("gulp-jsdoc");
|
|||
//var jsdoc2md = require("gulp-jsdoc-to-markdown");
|
|||
var pkg = require("./package.json"); |
|||
var dateFormat = require("dateformatter").format; |
|||
var replace = require("gulp-replace"); |
|||
|
|||
pkg.name = "Editor.md"; |
|||
pkg.today = dateFormat; |
|||
|
|||
var headerComment = ["/*", |
|||
" * <%= pkg.name %>", |
|||
" *", |
|||
" * @file <%= fileName(file) %> ", |
|||
" * @version v<%= pkg.version %> ", |
|||
" * @description <%= pkg.description %>", |
|||
" * @license MIT License", |
|||
" * @author <%= pkg.author %>", |
|||
" * {@link <%= pkg.homepage %>}", |
|||
" * @updateTime <%= pkg.today('Y-m-d') %>", |
|||
" */", |
|||
"\r\n"].join("\r\n"); |
|||
|
|||
var headerMiniComment = "/*! <%= pkg.name %> v<%= pkg.version %> | <%= fileName(file) %> | <%= pkg.description %> | MIT License | By: <%= pkg.author %> | <%= pkg.homepage %> | <%=pkg.today('Y-m-d') %> */\r\n"; |
|||
|
|||
var scssTask = function(fileName, path) { |
|||
|
|||
path = path || "scss/"; |
|||
|
|||
var distPath = "css"; |
|||
|
|||
return sass(path + fileName + ".scss", { style: "expanded", sourcemap: false, noCache : true }) |
|||
.pipe(gulp.dest(distPath)) |
|||
.pipe(header(headerComment, {pkg : pkg, fileName : function(file) { |
|||
var name = file.path.split(file.base); |
|||
return name[1].replace("\\", ""); |
|||
}})) |
|||
.pipe(gulp.dest(distPath)) |
|||
.pipe(rename({ suffix: ".min" })) |
|||
.pipe(gulp.dest(distPath)) |
|||
.pipe(minifycss()) |
|||
.pipe(gulp.dest(distPath)) |
|||
.pipe(header(headerMiniComment, {pkg : pkg, fileName : function(file) { |
|||
var name = file.path.split(file.base); |
|||
return name[1].replace("\\", ""); |
|||
}})) |
|||
.pipe(gulp.dest(distPath)) |
|||
.pipe(notify({ message: fileName + ".scss task completed!" })); |
|||
}; |
|||
|
|||
gulp.task("scss", function() { |
|||
return scssTask("editormd"); |
|||
}); |
|||
|
|||
gulp.task("scss2", function() { |
|||
return scssTask("editormd.preview"); |
|||
}); |
|||
|
|||
gulp.task("scss3", function() { |
|||
return scssTask("editormd.logo"); |
|||
}); |
|||
|
|||
gulp.task("js", function() { |
|||
return gulp.src("./src/editormd.js") |
|||
.pipe(jshint("./.jshintrc")) |
|||
.pipe(jshint.reporter("default")) |
|||
.pipe(header(headerComment, {pkg : pkg, fileName : function(file) { |
|||
var name = file.path.split(file.base); |
|||
return name[1].replace(/[\\\/]?/, ""); |
|||
}})) |
|||
.pipe(gulp.dest("./")) |
|||
.pipe(rename({ suffix: ".min" })) |
|||
.pipe(uglify()) // {outSourceMap: true, sourceRoot: './'}
|
|||
.pipe(gulp.dest("./")) |
|||
.pipe(header(headerMiniComment, {pkg : pkg, fileName : function(file) { |
|||
var name = file.path.split(file.base + ( (os.platform() === "win32") ? "\\" : "/") ); |
|||
return name[1].replace(/[\\\/]?/, ""); |
|||
}})) |
|||
.pipe(gulp.dest("./")) |
|||
.pipe(notify({ message: "editormd.js task complete" })); |
|||
}); |
|||
|
|||
gulp.task("amd", function() { |
|||
var replaceText1 = [ |
|||
'var cmModePath = "codemirror/mode/";', |
|||
' var cmAddonPath = "codemirror/addon/";', |
|||
'', |
|||
' var codeMirrorModules = [', |
|||
' "jquery", "marked", "prettify",', |
|||
' "katex", "raphael", "underscore", "flowchart", "jqueryflowchart", "sequenceDiagram",', |
|||
'', |
|||
' "codemirror/lib/codemirror",', |
|||
' cmModePath + "css/css",', |
|||
' cmModePath + "sass/sass",', |
|||
' cmModePath + "shell/shell",', |
|||
' cmModePath + "sql/sql",', |
|||
' cmModePath + "clike/clike",', |
|||
' cmModePath + "php/php",', |
|||
' cmModePath + "xml/xml",', |
|||
' cmModePath + "markdown/markdown",', |
|||
' cmModePath + "javascript/javascript",', |
|||
' cmModePath + "htmlmixed/htmlmixed",', |
|||
' cmModePath + "gfm/gfm",', |
|||
' cmModePath + "http/http",', |
|||
' cmModePath + "go/go",', |
|||
' cmModePath + "dart/dart",', |
|||
' cmModePath + "coffeescript/coffeescript",', |
|||
' cmModePath + "nginx/nginx",', |
|||
' cmModePath + "python/python",', |
|||
' cmModePath + "perl/perl",', |
|||
' cmModePath + "lua/lua",', |
|||
' cmModePath + "r/r", ', |
|||
' cmModePath + "ruby/ruby", ', |
|||
' cmModePath + "rst/rst",', |
|||
' cmModePath + "smartymixed/smartymixed",', |
|||
' cmModePath + "vb/vb",', |
|||
' cmModePath + "vbscript/vbscript",', |
|||
' cmModePath + "velocity/velocity",', |
|||
' cmModePath + "xquery/xquery",', |
|||
' cmModePath + "yaml/yaml",', |
|||
' cmModePath + "erlang/erlang",', |
|||
' cmModePath + "jade/jade",', |
|||
'', |
|||
' cmAddonPath + "edit/trailingspace", ', |
|||
' cmAddonPath + "dialog/dialog", ', |
|||
' cmAddonPath + "search/searchcursor", ', |
|||
' cmAddonPath + "search/search", ', |
|||
' cmAddonPath + "scroll/annotatescrollbar", ', |
|||
' cmAddonPath + "search/matchesonscrollbar", ', |
|||
' cmAddonPath + "display/placeholder", ', |
|||
' cmAddonPath + "edit/closetag", ', |
|||
' cmAddonPath + "fold/foldcode",', |
|||
' cmAddonPath + "fold/foldgutter",', |
|||
' cmAddonPath + "fold/indent-fold",', |
|||
' cmAddonPath + "fold/brace-fold",', |
|||
' cmAddonPath + "fold/xml-fold", ', |
|||
' cmAddonPath + "fold/markdown-fold",', |
|||
' cmAddonPath + "fold/comment-fold", ', |
|||
' cmAddonPath + "mode/overlay", ', |
|||
' cmAddonPath + "selection/active-line", ', |
|||
' cmAddonPath + "edit/closebrackets", ', |
|||
' cmAddonPath + "display/fullscreen",', |
|||
' cmAddonPath + "search/match-highlighter"', |
|||
' ];', |
|||
'', |
|||
' define(codeMirrorModules, factory);' |
|||
].join("\r\n"); |
|||
|
|||
var replaceText2 = [ |
|||
"if (typeof define == \"function\" && define.amd) {", |
|||
" $ = arguments[0];", |
|||
" marked = arguments[1];", |
|||
" prettify = arguments[2];", |
|||
" katex = arguments[3];", |
|||
" Raphael = arguments[4];", |
|||
" _ = arguments[5];", |
|||
" flowchart = arguments[6];", |
|||
" CodeMirror = arguments[9];", |
|||
" }" |
|||
].join("\r\n"); |
|||
|
|||
gulp.src("src/editormd.js") |
|||
.pipe(rename({ suffix: ".amd" })) |
|||
.pipe(gulp.dest('./')) |
|||
.pipe(header(headerComment, {pkg : pkg, fileName : function(file) { |
|||
var name = file.path.split(file.base); |
|||
return name[1].replace(/[\\\/]?/, ""); |
|||
}})) |
|||
.pipe(gulp.dest("./")) |
|||
.pipe(replace("/* Require.js define replace */", replaceText1)) |
|||
.pipe(gulp.dest('./')) |
|||
.pipe(replace("/* Require.js assignment replace */", replaceText2)) |
|||
.pipe(gulp.dest('./')) |
|||
.pipe(rename({ suffix: ".min" })) |
|||
.pipe(uglify()) //{outSourceMap: true, sourceRoot: './'}
|
|||
.pipe(gulp.dest("./")) |
|||
.pipe(header(headerMiniComment, {pkg : pkg, fileName : function(file) { |
|||
var name = file.path.split(file.base + ( (os.platform() === "win32") ? "\\" : "/") ); |
|||
return name[1].replace(/[\\\/]?/, ""); |
|||
}})) |
|||
.pipe(gulp.dest("./")) |
|||
.pipe(notify({ message: "amd version task complete"})); |
|||
}); |
|||
|
|||
|
|||
var codeMirror = { |
|||
path : { |
|||
src : { |
|||
mode : "lib/codemirror/mode", |
|||
addon : "lib/codemirror/addon" |
|||
}, |
|||
dist : "lib/codemirror" |
|||
}, |
|||
modes : [ |
|||
"css", |
|||
"sass", |
|||
"shell", |
|||
"sql", |
|||
"clike", |
|||
"php", |
|||
"xml", |
|||
"markdown", |
|||
"javascript", |
|||
"htmlmixed", |
|||
"gfm", |
|||
"http", |
|||
"go", |
|||
"dart", |
|||
"coffeescript", |
|||
"nginx", |
|||
"python", |
|||
"perl", |
|||
"lua", |
|||
"r", |
|||
"ruby", |
|||
"rst", |
|||
"smartymixed", |
|||
"vb", |
|||
"vbscript", |
|||
"velocity", |
|||
"xquery", |
|||
"yaml", |
|||
"erlang", |
|||
"jade", |
|||
], |
|||
|
|||
addons : [ |
|||
"edit/trailingspace", |
|||
"dialog/dialog", |
|||
"search/searchcursor", |
|||
"search/search", |
|||
"scroll/annotatescrollbar", |
|||
"search/matchesonscrollbar", |
|||
"display/placeholder", |
|||
"edit/closetag", |
|||
"fold/foldcode", |
|||
"fold/foldgutter", |
|||
"fold/indent-fold", |
|||
"fold/brace-fold", |
|||
"fold/xml-fold", |
|||
"fold/markdown-fold", |
|||
"fold/comment-fold", |
|||
"mode/overlay", |
|||
"selection/active-line", |
|||
"edit/closebrackets", |
|||
"display/fullscreen", |
|||
"search/match-highlighter" |
|||
] |
|||
}; |
|||
|
|||
gulp.task("cm-mode", function() { |
|||
|
|||
var modes = [ |
|||
codeMirror.path.src.mode + "/meta.js" |
|||
]; |
|||
|
|||
for(var i in codeMirror.modes) { |
|||
var mode = codeMirror.modes[i]; |
|||
modes.push(codeMirror.path.src.mode + "/" + mode + "/" + mode + ".js"); |
|||
} |
|||
|
|||
return gulp.src(modes) |
|||
.pipe(concat("modes.min.js")) |
|||
.pipe(gulp.dest(codeMirror.path.dist)) |
|||
.pipe(uglify()) // {outSourceMap: true, sourceRoot: codeMirror.path.dist}
|
|||
.pipe(gulp.dest(codeMirror.path.dist)) |
|||
.pipe(header(headerMiniComment, {pkg : pkg, fileName : function(file) { |
|||
var name = file.path.split(file.base + "\\"); |
|||
return (name[1]?name[1]:name[0]).replace(/\\/g, ""); |
|||
}})) |
|||
.pipe(gulp.dest(codeMirror.path.dist)) |
|||
.pipe(notify({ message: "codemirror-mode task complete!" })); |
|||
}); |
|||
|
|||
gulp.task("cm-addon", function() { |
|||
|
|||
var addons = []; |
|||
|
|||
for(var i in codeMirror.addons) { |
|||
var addon = codeMirror.addons[i]; |
|||
addons.push(codeMirror.path.src.addon + "/" + addon + ".js"); |
|||
} |
|||
|
|||
return gulp.src(addons) |
|||
.pipe(concat("addons.min.js")) |
|||
.pipe(gulp.dest(codeMirror.path.dist)) |
|||
.pipe(uglify()) //{outSourceMap: true, sourceRoot: codeMirror.path.dist}
|
|||
.pipe(gulp.dest(codeMirror.path.dist)) |
|||
.pipe(header(headerMiniComment, {pkg : pkg, fileName : function(file) { |
|||
var name = file.path.split(file.base + "\\"); |
|||
return (name[1]?name[1]:name[0]).replace(/\\/g, ""); |
|||
}})) |
|||
.pipe(gulp.dest(codeMirror.path.dist)) |
|||
.pipe(notify({ message: "codemirror-addon.js task complete" })); |
|||
}); |
|||
/* |
|||
gulp.task("jsdoc", function(){ |
|||
return gulp.src(["./src/editormd.js", "README.md"]) |
|||
.pipe(jsdoc.parser()) |
|||
.pipe(jsdoc.generator("./docs/html")); |
|||
}); |
|||
|
|||
gulp.task("jsdoc2md", function() { |
|||
return gulp.src("src/js/editormd.js") |
|||
.pipe(jsdoc2md()) |
|||
.on("error", function(err){ |
|||
gutil.log(gutil.colors.red("jsdoc2md failed"), err.message); |
|||
}) |
|||
.pipe(rename(function(path) { |
|||
path.extname = ".md"; |
|||
})) |
|||
.pipe(gulp.dest("docs/markdown")); |
|||
}); |
|||
*/ |
|||
gulp.task("watch", function() { |
|||
gulp.watch("scss/*.scss", ["scss"]); |
|||
gulp.watch("scss/editormd.preview.scss", ["scss", "scss2"]); |
|||
gulp.watch("scss/editormd.logo.scss", ["scss", "scss3"]); |
|||
gulp.watch("src/editormd.js", ["js", "amd"]); |
|||
}); |
|||
|
|||
gulp.task("default", function() { |
|||
gulp.run("scss"); |
|||
gulp.run("scss2"); |
|||
gulp.run("scss3"); |
|||
gulp.run("js"); |
|||
gulp.run("amd"); |
|||
gulp.run("cm-addon"); |
|||
gulp.run("cm-mode"); |
|||
}); |
|||
|
|||
File diff suppressed because it is too large
@ -1,98 +1,98 @@ |
|||
/* |
|||
* Editor.md |
|||
* |
|||
* @file editormd.logo.css |
|||
* @version v1.5.0 |
|||
* @file /editormd.logo.css |
|||
* @version v1.5.1 |
|||
* @description Open source online markdown editor. |
|||
* @license MIT License |
|||
* @author Pandao |
|||
* {@link https://github.com/pandao/editor.md} |
|||
* @updateTime 2015-06-09 |
|||
* @updateTime 2019-05-11 |
|||
*/ |
|||
|
|||
/*! prefixes.scss v0.1.0 | Author: Pandao | https://github.com/pandao/prefixes.scss | MIT license | Copyright (c) 2015 */ |
|||
@font-face { |
|||
font-family: 'editormd-logo'; |
|||
src: url("../fonts/editormd-logo.eot?-5y8q6h"); |
|||
src: url(".../fonts/editormd-logo.eot?#iefix-5y8q6h") format("embedded-opentype"), url("../fonts/editormd-logo.woff?-5y8q6h") format("woff"), url("../fonts/editormd-logo.ttf?-5y8q6h") format("truetype"), url("../fonts/editormd-logo.svg?-5y8q6h#icomoon") format("svg"); |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
} |
|||
.editormd-logo, |
|||
.editormd-logo-1x, |
|||
.editormd-logo-2x, |
|||
.editormd-logo-3x, |
|||
.editormd-logo-4x, |
|||
.editormd-logo-5x, |
|||
.editormd-logo-6x, |
|||
.editormd-logo-7x, |
|||
.editormd-logo-8x { |
|||
font-family: 'editormd-logo'; |
|||
speak: none; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
font-variant: normal; |
|||
text-transform: none; |
|||
font-size: inherit; |
|||
line-height: 1; |
|||
display: inline-block; |
|||
text-rendering: auto; |
|||
vertical-align: inherit; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
.editormd-logo:before, |
|||
.editormd-logo-1x:before, |
|||
.editormd-logo-2x:before, |
|||
.editormd-logo-3x:before, |
|||
.editormd-logo-4x:before, |
|||
.editormd-logo-5x:before, |
|||
.editormd-logo-6x:before, |
|||
.editormd-logo-7x:before, |
|||
.editormd-logo-8x:before { |
|||
content: "\e1987"; |
|||
/* |
|||
HTML Entity 󡦇 |
|||
example: <span class="editormd-logo">󡦇</span> |
|||
*/ |
|||
} |
|||
|
|||
.editormd-logo-1x { |
|||
font-size: 1em; |
|||
} |
|||
|
|||
.editormd-logo-lg { |
|||
font-size: 1.2em; |
|||
} |
|||
|
|||
.editormd-logo-2x { |
|||
font-size: 2em; |
|||
} |
|||
|
|||
.editormd-logo-3x { |
|||
font-size: 3em; |
|||
} |
|||
|
|||
.editormd-logo-4x { |
|||
font-size: 4em; |
|||
} |
|||
|
|||
.editormd-logo-5x { |
|||
font-size: 5em; |
|||
} |
|||
|
|||
.editormd-logo-6x { |
|||
font-size: 6em; |
|||
} |
|||
|
|||
.editormd-logo-7x { |
|||
font-size: 7em; |
|||
} |
|||
|
|||
.editormd-logo-8x { |
|||
font-size: 8em; |
|||
} |
|||
|
|||
.editormd-logo-color { |
|||
color: #2196F3; |
|||
} |
|||
/*! prefixes.scss v0.1.0 | Author: Pandao | https://github.com/pandao/prefixes.scss | MIT license | Copyright (c) 2015 */ |
|||
@font-face { |
|||
font-family: 'editormd-logo'; |
|||
src: url("../fonts/editormd-logo.eot?-5y8q6h"); |
|||
src: url("../fonts/editormd-logo.eot?#iefix-5y8q6h") format("embedded-opentype"), url("../fonts/editormd-logo.woff?-5y8q6h") format("woff"), url("../fonts/editormd-logo.ttf?-5y8q6h") format("truetype"), url("../fonts/editormd-logo.svg?-5y8q6h#icomoon") format("svg"); |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
} |
|||
.editormd-logo, |
|||
.editormd-logo-1x, |
|||
.editormd-logo-2x, |
|||
.editormd-logo-3x, |
|||
.editormd-logo-4x, |
|||
.editormd-logo-5x, |
|||
.editormd-logo-6x, |
|||
.editormd-logo-7x, |
|||
.editormd-logo-8x { |
|||
font-family: 'editormd-logo'; |
|||
speak: none; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
font-variant: normal; |
|||
text-transform: none; |
|||
font-size: inherit; |
|||
line-height: 1; |
|||
display: inline-block; |
|||
text-rendering: auto; |
|||
vertical-align: inherit; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
.editormd-logo:before, |
|||
.editormd-logo-1x:before, |
|||
.editormd-logo-2x:before, |
|||
.editormd-logo-3x:before, |
|||
.editormd-logo-4x:before, |
|||
.editormd-logo-5x:before, |
|||
.editormd-logo-6x:before, |
|||
.editormd-logo-7x:before, |
|||
.editormd-logo-8x:before { |
|||
content: "\e1987"; |
|||
/* |
|||
HTML Entity 󡦇 |
|||
example: <span class="editormd-logo">󡦇</span> |
|||
*/ |
|||
} |
|||
|
|||
.editormd-logo-1x { |
|||
font-size: 1em; |
|||
} |
|||
|
|||
.editormd-logo-lg { |
|||
font-size: 1.2em; |
|||
} |
|||
|
|||
.editormd-logo-2x { |
|||
font-size: 2em; |
|||
} |
|||
|
|||
.editormd-logo-3x { |
|||
font-size: 3em; |
|||
} |
|||
|
|||
.editormd-logo-4x { |
|||
font-size: 4em; |
|||
} |
|||
|
|||
.editormd-logo-5x { |
|||
font-size: 5em; |
|||
} |
|||
|
|||
.editormd-logo-6x { |
|||
font-size: 6em; |
|||
} |
|||
|
|||
.editormd-logo-7x { |
|||
font-size: 7em; |
|||
} |
|||
|
|||
.editormd-logo-8x { |
|||
font-size: 8em; |
|||
} |
|||
|
|||
.editormd-logo-color { |
|||
color: #2196F3; |
|||
} |
|||
|
|||
@ -1,2 +1,2 @@ |
|||
/*! Editor.md v1.5.0 | editormd.logo.min.css | Open source online markdown editor. | MIT License | By: Pandao | https://github.com/pandao/editor.md | 2015-06-09 */ |
|||
/*! prefixes.scss v0.1.0 | Author: Pandao | https://github.com/pandao/prefixes.scss | MIT license | Copyright (c) 2015 */@font-face{font-family:editormd-logo;src:url(../fonts/editormd-logo.eot?-5y8q6h);src:url(.../fonts/editormd-logo.eot?#iefix-5y8q6h)format("embedded-opentype"),url(../fonts/editormd-logo.woff?-5y8q6h)format("woff"),url(../fonts/editormd-logo.ttf?-5y8q6h)format("truetype"),url(../fonts/editormd-logo.svg?-5y8q6h#icomoon)format("svg");font-weight:400;font-style:normal}.editormd-logo,.editormd-logo-1x,.editormd-logo-2x,.editormd-logo-3x,.editormd-logo-4x,.editormd-logo-5x,.editormd-logo-6x,.editormd-logo-7x,.editormd-logo-8x{font-family:editormd-logo;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;font-size:inherit;line-height:1;display:inline-block;text-rendering:auto;vertical-align:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.editormd-logo-1x:before,.editormd-logo-2x:before,.editormd-logo-3x:before,.editormd-logo-4x:before,.editormd-logo-5x:before,.editormd-logo-6x:before,.editormd-logo-7x:before,.editormd-logo-8x:before,.editormd-logo:before{content:"\e1987"}.editormd-logo-1x{font-size:1em}.editormd-logo-lg{font-size:1.2em}.editormd-logo-2x{font-size:2em}.editormd-logo-3x{font-size:3em}.editormd-logo-4x{font-size:4em}.editormd-logo-5x{font-size:5em}.editormd-logo-6x{font-size:6em}.editormd-logo-7x{font-size:7em}.editormd-logo-8x{font-size:8em}.editormd-logo-color{color:#2196F3} |
|||
/*! Editor.md v1.5.1 | /editormd.logo.min.css | Open source online markdown editor. | MIT License | By: Pandao | https://github.com/pandao/editor.md | 2019-05-11 */ |
|||
/*! prefixes.scss v0.1.0 | Author: Pandao | https://github.com/pandao/prefixes.scss | MIT license | Copyright (c) 2015 */@font-face{font-family:editormd-logo;src:url(../fonts/editormd-logo.eot?-5y8q6h);src:url(../fonts/editormd-logo.eot?#iefix-5y8q6h) format("embedded-opentype"),url(../fonts/editormd-logo.woff?-5y8q6h) format("woff"),url(../fonts/editormd-logo.ttf?-5y8q6h) format("truetype"),url(../fonts/editormd-logo.svg?-5y8q6h#icomoon) format("svg");font-weight:400;font-style:normal}.editormd-logo,.editormd-logo-1x,.editormd-logo-2x,.editormd-logo-3x,.editormd-logo-4x,.editormd-logo-5x,.editormd-logo-6x,.editormd-logo-7x,.editormd-logo-8x{font-family:editormd-logo;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;font-size:inherit;line-height:1;display:inline-block;text-rendering:auto;vertical-align:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.editormd-logo-1x:before,.editormd-logo-2x:before,.editormd-logo-3x:before,.editormd-logo-4x:before,.editormd-logo-5x:before,.editormd-logo-6x:before,.editormd-logo-7x:before,.editormd-logo-8x:before,.editormd-logo:before{content:"\e1987"}.editormd-logo-1x{font-size:1em}.editormd-logo-lg{font-size:1.2em}.editormd-logo-2x{font-size:2em}.editormd-logo-3x{font-size:3em}.editormd-logo-4x{font-size:4em}.editormd-logo-5x{font-size:5em}.editormd-logo-6x{font-size:6em}.editormd-logo-7x{font-size:7em}.editormd-logo-8x{font-size:8em}.editormd-logo-color{color:#2196F3} |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -1,191 +1,195 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh"> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<title>Emoji - Editor.md examples</title> |
|||
<link rel="stylesheet" href="css/style.css" /> |
|||
<link rel="stylesheet" href="../css/editormd.css" /> |
|||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" /> |
|||
<style> |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div id="layout"> |
|||
<header> |
|||
<h1>Emoji 表情</h1> |
|||
<p>Supports:</p> |
|||
<ul style="margin: 10px 0 0 18px;"> |
|||
<li>Github emoji : <a href="http://www.emoji-cheat-sheet.com/" target="_blank">http://www.emoji-cheat-sheet.com/</a></li> |
|||
<li>Twitter Emoji(Twemoji) : <a href="http://twitter.github.io/twemoji/preview.html" target="_blank">http://twitter.github.io/twemoji/preview.html</a></li> |
|||
<li>FontAwesome icon font emoji : <a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank">http://fortawesome.github.io/Font-Awesome/icons/</a></li> |
|||
<li>Editor.md logo icon font emoji</li> |
|||
</ul> |
|||
</header> |
|||
<div id="test-editormd"> |
|||
<textarea style="display:none;">### Emoji 表情 :smiley: |
|||
|
|||
[TOC] |
|||
|
|||
### Emoji |
|||
|
|||
Emoji cheat sheet for Campfire and GitHub. |
|||
|
|||
[http://www.emoji-cheat-sheet.com/](http://www.emoji-cheat-sheet.com/) |
|||
|
|||
**Usage:** |
|||
|
|||
:emoji-name: |
|||
|
|||
**Examples:** |
|||
|
|||
:heart: :smiley: :+1: :-1: :black_large_square: :waxing_gibbous_moon: :moon: :crescent_moon: |
|||
|
|||
### Twitter Emoji (Twemoji) |
|||
|
|||
**Usage:** |
|||
|
|||
:tw-xxxx: |
|||
|
|||
**Examples:** |
|||
|
|||
:tw-1f504: :tw-30-20e3: :tw-31-20e3: :tw-32-20e3: :tw-33-20e3: :tw-34-20e3: :tw-35-20e3: :tw-36-20e3: :tw-37-20e3: :tw-38-20e3: :tw-39-20e3: :tw-1f51f: |
|||
|
|||
[http://twitter.github.io/twemoji/preview.html](http://twitter.github.io/twemoji/preview.html) |
|||
|
|||
### Fortawesome icons |
|||
|
|||
[http://fortawesome.github.io/Font-Awesome/icons/](http://fortawesome.github.io/Font-Awesome/icons/) |
|||
|
|||
**Usage:** |
|||
|
|||
:fa-xxxx: |
|||
|
|||
**Examples:** |
|||
|
|||
:fa-wifi: :fa-twitter: :fa-google-plus: :fa-git-square: :fa-github-alt: :fa-external-link-square: |
|||
|
|||
### Editor.md logos |
|||
|
|||
**Usage:** |
|||
|
|||
:editormd-logo: |
|||
:editormd-logo-1x: |
|||
... |
|||
:editormd-logo-8x: |
|||
|
|||
**Examples:** |
|||
|
|||
:editormd-logo: :editormd-logo-1x: :editormd-logo-2x: :editormd-logo-3x: :editormd-logo-4x: :editormd-logo-5x: :editormd-logo-6x: :editormd-logo-7x: :editormd-logo-8x: |
|||
|
|||
### Mixed tests |
|||
|
|||
> Blockquotes :star: |
|||
|
|||
@pandao dasfsadfasdf:fa-edit: :warning: :smiley:dsafsdfsad\:fdsfdf\:f dfdf: :fa-save::fa-star: :fa-truck: |
|||
**fdfasd:smiley:dsfsdfsfd** ~~fsdfds:smiley:dfsdfsdf :fa-info:~~ @pandao |
|||
|
|||
:fa-weixin: :fa-qq: :fa-weibo: :fa-tencent-weibo: :fa-github: :fa-git: |
|||
|
|||
*dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf* |
|||
|
|||
___Emphasis :fa-gear: Italic:smiley:___ __Emphasis:smiley:__ |
|||
|
|||
# H1 dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf:fa-star: |
|||
## H2 dsfd:fa-star:fsfd:smiley:dsfsfdsfd:smiley:dsfdf:fa-star: |
|||
### H3 dsfdfsfd@pandao :smiley:dsfsfdsfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-save:dsfsdf @pandao |
|||
#### H4 dsfdfsfd@pandao :smiley:dsfsfdsfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-save:dsfsdf |
|||
##### H5 dsfdfsfd:smiley:dsfsfd @pandao sfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-save:dsfsdf |
|||
###### H6 dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-star:dsfsdf |
|||
|
|||
[:smiley:](http://www.emoji-cheat-sheet.com/ "link + emoji") link + emoji |
|||
|
|||
- dafs@pandao sdfsdaf:smiley:dfsdfsdf |
|||
- dafssdfsdaf:smiley:dfsdfsdf @pandao |
|||
- dafssdfsdaf:smiley:dfsdfsdf |
|||
- dafss:fa-truck:dfsdaf:smiley:dfsd @pandao fsdf |
|||
- dafssd: :fa-truck:fsdaf:smiley:dfsdfsdf :fa-star:: :fa-truck: |
|||
+ dafssdfsdaf:smiley:dfsdfsdf @pandao |
|||
+ dafs@pandao s:fa-truck:dfsdaf:smiley:dfsdfsdf |
|||
|
|||
|
|||
1. :smiley:第一行:fa-truck:fsdaf:smiley:dfs@pandao dfsdf :fa-save:: :fa-truck: |
|||
- dafssdfsdaf:smiley:dfsdfsdf @pandao |
|||
- dafss:fa-truck:dfsdaf:smiley:dfsdfsdf |
|||
2. :smiley:第二行:fa-truck:fsdaf:smiley:dfsdfsdf :fa-star:: :fa-truck: |
|||
3. 第三行:fa-truck:fsdaf:smiley:dfsdfsdf :fa-save:: :fa-truck: |
|||
|
|||
> Blockquotes @pandao |
|||
|
|||
> dd:smiley:引用文本(Blockquotes:smiley:)fdasfad :fa-star:: dfd :fa-truck: @pandao |
|||
|
|||
#### Datetime test |
|||
|
|||
02:21:47 |
|||
|
|||
2015-03-12 02:21:47 |
|||
|
|||
### In table |
|||
|
|||
|:100: First Header | Second:smiley: Header:smiley: | |
|||
| ------------- | ------------- | |
|||
| Content:fa-truck: Cell | :smiley:Content Cell :smiley: | |
|||
| Con:fa-truck:tent Cell:bangbang: | Content Cell dfsdfsdf :fa-star: :dfdf :fa-truck: | |
|||
|
|||
### Editor.md logo emoji |
|||
|
|||
:fa-heart:fasdfsdfsfddffd:editormd-logo: :editormd-logo: :editormd-logo-4x: |
|||
|
|||
dfasfasdfasdf:bangbang: |
|||
|
|||
This is an H1 :editormd-logo-4x: @pandao |
|||
============= |
|||
|
|||
@pandao This :fa-save:: :fa-truck:is an H2 :100: |
|||
------------- |
|||
|
|||
### GFM task lists :editormd-logo-5x: |
|||
|
|||
- [x] :smiley: @mentions, :smiley: #refs, [links](), **formatting**, and <del>tags</del> supported :editormd-logo:; |
|||
- [x] list syntax required (any unordered or ordered list supported) :editormd-logo-3x:; |
|||
- [x] [ ] :smiley: this is a complete item :smiley:; |
|||
- [ ] []this is an incomplete item [test link](#) :fa-star: @pandao; |
|||
- [ ] [ ]this is an incomplete item; |
|||
- [ ] :smiley: this is an incomplete item [test link](#); |
|||
- [ ] :smiley: this is an incomplete item [test link](#); |
|||
|
|||
</textarea> |
|||
</div> |
|||
</div> |
|||
<script src="js/jquery.min.js"></script> |
|||
<script src="../editormd.js"></script> |
|||
<script type="text/javascript"> |
|||
var testEditor; |
|||
|
|||
$(function() { |
|||
|
|||
// You can custom Emoji's graphics files url path |
|||
editormd.emoji = { |
|||
path : "http://www.emoji-cheat-sheet.com/graphics/emojis/", |
|||
ext : ".png" |
|||
}; |
|||
|
|||
// Twitter Emoji (Twemoji) graphics files url path |
|||
editormd.twemoji = { |
|||
path : "http://twemoji.maxcdn.com/72x72/", |
|||
ext : ".png" |
|||
}; |
|||
|
|||
testEditor = editormd("test-editormd", { |
|||
width : "90%", |
|||
height : 720, |
|||
toc : true, |
|||
|
|||
emoji : true, // Support Github emoji, Twitter Emoji(Twemoji), fontAwesome, Editor.md logo emojis. |
|||
|
|||
taskList : true, |
|||
path : '../lib/' |
|||
}); |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
<!DOCTYPE html> |
|||
<html lang="zh"> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<title>Emoji - Editor.md examples</title> |
|||
<link rel="stylesheet" href="css/style.css" /> |
|||
<link rel="stylesheet" href="../css/editormd.css" /> |
|||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" /> |
|||
<style> |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div id="layout"> |
|||
<header> |
|||
<h1>Emoji 表情</h1> |
|||
<p>Supports:</p> |
|||
<ul style="margin: 10px 0 0 18px;"> |
|||
<li>Github emoji : <a href="http://www.emoji-cheat-sheet.com/" target="_blank">http://www.emoji-cheat-sheet.com/</a></li> |
|||
<li>Twitter Emoji(Twemoji) : <a href="http://twitter.github.io/twemoji/preview.html" target="_blank">http://twitter.github.io/twemoji/preview.html</a></li> |
|||
<li>FontAwesome icon font emoji : <a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank">http://fortawesome.github.io/Font-Awesome/icons/</a></li> |
|||
<li>Editor.md logo icon font emoji</li> |
|||
</ul> |
|||
</header> |
|||
<div id="test-editormd"> |
|||
<textarea style="display:none;">### Emoji 表情 :smiley: |
|||
|
|||
[TOC] |
|||
|
|||
### Emoji |
|||
|
|||
Emoji cheat sheet for Campfire and GitHub. |
|||
|
|||
[http://www.emoji-cheat-sheet.com/](http://www.emoji-cheat-sheet.com/) |
|||
|
|||
**Usage:** |
|||
|
|||
:emoji-name: |
|||
|
|||
**Examples:** |
|||
|
|||
:heart: :smiley: :+1: :-1: :black_large_square: :waxing_gibbous_moon: :moon: :crescent_moon: |
|||
|
|||
### Twitter Emoji (Twemoji) |
|||
|
|||
**Usage:** |
|||
|
|||
:tw-xxxx: |
|||
|
|||
**Examples:** |
|||
|
|||
:tw-1f504: :tw-30-20e3: :tw-31-20e3: :tw-32-20e3: :tw-33-20e3: :tw-34-20e3: :tw-35-20e3: :tw-36-20e3: :tw-37-20e3: :tw-38-20e3: :tw-39-20e3: :tw-1f51f: |
|||
|
|||
[http://twitter.github.io/twemoji/preview.html](http://twitter.github.io/twemoji/preview.html) |
|||
|
|||
### Fortawesome icons |
|||
|
|||
[http://fortawesome.github.io/Font-Awesome/icons/](http://fortawesome.github.io/Font-Awesome/icons/) |
|||
|
|||
**Usage:** |
|||
|
|||
:fa-xxxx: |
|||
|
|||
**Examples:** |
|||
|
|||
:fa-wifi: :fa-twitter: :fa-google-plus: :fa-git-square: :fa-github-alt: :fa-external-link-square: |
|||
|
|||
### Editor.md logos |
|||
|
|||
**Usage:** |
|||
|
|||
:editormd-logo: |
|||
:editormd-logo-1x: |
|||
... |
|||
:editormd-logo-8x: |
|||
|
|||
**Examples:** |
|||
|
|||
:editormd-logo: :editormd-logo-1x: :editormd-logo-2x: :editormd-logo-3x: :editormd-logo-4x: :editormd-logo-5x: :editormd-logo-6x: :editormd-logo-7x: :editormd-logo-8x: |
|||
|
|||
### Mixed tests |
|||
|
|||
> Blockquotes :star: |
|||
|
|||
@pandao dasfsadfasdf:fa-edit: :warning: :smiley:dsafsdfsad\:fdsfdf\:f dfdf: :fa-save::fa-star: :fa-truck: |
|||
**fdfasd:smiley:dsfsdfsfd** ~~fsdfds:smiley:dfsdfsdf :fa-info:~~ @pandao |
|||
|
|||
:fa-weixin: :fa-qq: :fa-weibo: :fa-tencent-weibo: :fa-github: :fa-git: |
|||
|
|||
*dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf* |
|||
|
|||
___Emphasis :fa-gear: Italic:smiley:___ __Emphasis:smiley:__ |
|||
|
|||
# H1 dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf:fa-star: |
|||
## H2 dsfd:fa-star:fsfd:smiley:dsfsfdsfd:smiley:dsfdf:fa-star: |
|||
### H3 dsfdfsfd@pandao :smiley:dsfsfdsfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-save:dsfsdf @pandao |
|||
#### H4 dsfdfsfd@pandao :smiley:dsfsfdsfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-save:dsfsdf |
|||
##### H5 dsfdfsfd:smiley:dsfsfd @pandao sfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-save:dsfsdf |
|||
###### H6 dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-star:dsfsdf |
|||
|
|||
[:smiley:](http://www.emoji-cheat-sheet.com/ "link + emoji") link + emoji |
|||
|
|||
- dafs@pandao sdfsdaf:smiley:dfsdfsdf |
|||
- dafssdfsdaf:smiley:dfsdfsdf @pandao |
|||
- dafssdfsdaf:smiley:dfsdfsdf |
|||
- dafss:fa-truck:dfsdaf:smiley:dfsd @pandao fsdf |
|||
- dafssd: :fa-truck:fsdaf:smiley:dfsdfsdf :fa-star:: :fa-truck: |
|||
+ dafssdfsdaf:smiley:dfsdfsdf @pandao |
|||
+ dafs@pandao s:fa-truck:dfsdaf:smiley:dfsdfsdf |
|||
|
|||
|
|||
1. :smiley:第一行:fa-truck:fsdaf:smiley:dfs@pandao dfsdf :fa-save:: :fa-truck: |
|||
- dafssdfsdaf:smiley:dfsdfsdf @pandao |
|||
- dafss:fa-truck:dfsdaf:smiley:dfsdfsdf |
|||
2. :smiley:第二行:fa-truck:fsdaf:smiley:dfsdfsdf :fa-star:: :fa-truck: |
|||
3. 第三行:fa-truck:fsdaf:smiley:dfsdfsdf :fa-save:: :fa-truck: |
|||
|
|||
> Blockquotes @pandao |
|||
|
|||
> dd:smiley:引用文本(Blockquotes:smiley:)fdasfad :fa-star:: dfd :fa-truck: @pandao |
|||
|
|||
#### Datetime test |
|||
|
|||
02:21:47 |
|||
|
|||
2015-03-12 02:21:47 |
|||
|
|||
### In table |
|||
|
|||
|:100: First Header | Second:smiley: Header:smiley: | |
|||
| ------------- | ------------- | |
|||
| Content:fa-truck: Cell | :smiley:Content Cell :smiley: | |
|||
| Con:fa-truck:tent Cell:bangbang: | Content Cell dfsdfsdf :fa-star: :dfdf :fa-truck: | |
|||
|
|||
### Editor.md logo emoji |
|||
|
|||
:fa-heart:fasdfsdfsfddffd:editormd-logo: :editormd-logo: :editormd-logo-4x: |
|||
|
|||
dfasfasdfasdf:bangbang: |
|||
|
|||
This is an H1 :editormd-logo-4x: @pandao |
|||
============= |
|||
|
|||
@pandao This :fa-save:: :fa-truck:is an H2 :100: |
|||
------------- |
|||
|
|||
### GFM task lists :editormd-logo-5x: |
|||
|
|||
- [x] :smiley: @mentions, :smiley: #refs, [links](), **formatting**, and <del>tags</del> supported :editormd-logo:; |
|||
- [x] list syntax required (any unordered or ordered list supported) :editormd-logo-3x:; |
|||
- [x] [ ] :smiley: this is a complete item :smiley:; |
|||
- [ ] []this is an incomplete item [test link](#) :fa-star: @pandao; |
|||
- [ ] [ ]this is an incomplete item; |
|||
- [ ] :smiley: this is an incomplete item [test link](#); |
|||
- [ ] :smiley: this is an incomplete item [test link](#); |
|||
|
|||
</textarea> |
|||
</div> |
|||
</div> |
|||
<script src="js/jquery.min.js"></script> |
|||
<script src="../editormd.js"></script> |
|||
<script type="text/javascript"> |
|||
var testEditor; |
|||
|
|||
$(function() { |
|||
|
|||
// You can custom Emoji's graphics files url path |
|||
editormd.emoji = { |
|||
path : "https://www.webpagefx.com/tools/emoji-cheat-sheet/graphics/emojis/", |
|||
ext : ".png" |
|||
}; |
|||
|
|||
// Twitter Emoji (Twemoji) graphics files url path |
|||
editormd.twemoji = { |
|||
path : "http://twemoji.maxcdn.com/72x72/", |
|||
ext : ".png" |
|||
}; |
|||
|
|||
testEditor = editormd("test-editormd", { |
|||
width : "90%", |
|||
height : 720, |
|||
toc : true, |
|||
|
|||
emoji : true, // Support Github emoji, Twitter Emoji(Twemoji), fontAwesome, Editor.md logo emojis. |
|||
// emojiCategories : ["github-emoji", "twemoji"], // Custom Emoji categories |
|||
// emojiCategories : ["twemoji"], // Custom Emoji categories |
|||
// emojiCategories : ["font-awesome"], // Custom Emoji categories |
|||
// emojiCategories : ["editormd-logo"], // Custom Emoji categories |
|||
|
|||
taskList : true, |
|||
path : '../lib/' |
|||
}); |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
|
|||
@ -1,142 +1,142 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh"> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<title>HTML Preview(markdown to html) - Editor.md examples</title> |
|||
<link rel="stylesheet" href="css/style.css" /> |
|||
<link rel="stylesheet" href="../css/editormd.preview.css" /> |
|||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" /> |
|||
<style> |
|||
.editormd-html-preview { |
|||
width: 90%; |
|||
margin: 0 auto; |
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div id="layout"> |
|||
<header> |
|||
<h1>Markdown转HTML的显示处理</h1> |
|||
<p>即：非编辑情况下的HTML预览</p> |
|||
<p>HTML Preview(markdown to html)</p> |
|||
</header> |
|||
<div class="btns"> |
|||
<button onclick="location.href='./html-preview-markdown-to-html-custom-toc-container.html';">将 ToC 移到自定义容器层</button> |
|||
</div> |
|||
<div id="test-editormd-view"> |
|||
<textarea style="display:none;" name="test-editormd-markdown-doc">###Hello world!</textarea> |
|||
</div> |
|||
<div id="test-editormd-view2"> |
|||
<textarea id="append-test" style="display:none;"> |
|||
|
|||
###科学公式 TeX(KaTeX) |
|||
|
|||
$$E=mc^2$$ |
|||
|
|||
行内的公式$$E=mc^2$$行内的公式，行内的$$E=mc^2$$公式。 |
|||
|
|||
$$\(\sqrt{3x-1}+(1+x)^2\)$$ |
|||
|
|||
$$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$ |
|||
|
|||
$$X^2 > Y$$ |
|||
|
|||
#####上标和下标 |
|||
|
|||
上标：X<sup>2</sup> |
|||
|
|||
下标：O<sub>2</sub> |
|||
|
|||
##### 代码块里包含的过滤标签及属性不会被过滤 |
|||
|
|||
```html |
|||
<style type="text/style"> |
|||
body{background:red;} |
|||
</style> |
|||
|
|||
<script type="text/javscript"> |
|||
alert("script"); |
|||
</script> |
|||
|
|||
<iframe height=498 width=510 src="http://player.youku.com/embed/XMzA0MzIwMDgw" frameborder=0 allowfullscreen></iframe> |
|||
``` |
|||
|
|||
#####Style |
|||
|
|||
<style> |
|||
body{background:red;} |
|||
</style> |
|||
|
|||
<style type="text/style"> |
|||
body{background:red;} |
|||
</style> |
|||
|
|||
#####Script |
|||
|
|||
<script> |
|||
alert("script"); |
|||
</script> |
|||
|
|||
<script type="text/javscript"> |
|||
alert("script"); |
|||
</script></textarea> |
|||
</div> |
|||
</div> |
|||
<!-- <script src="js/zepto.min.js"></script> |
|||
<script> |
|||
var jQuery = Zepto; // 为了避免修改flowChart.js和sequence-diagram.js的源码，所以使用Zepto.js时想支持flowChart/sequenceDiagram就得加上这一句 |
|||
</script> --> |
|||
<script src="js/jquery.min.js"></script> |
|||
<script src="../lib/marked.min.js"></script> |
|||
<script src="../lib/prettify.min.js"></script> |
|||
|
|||
<script src="../lib/raphael.min.js"></script> |
|||
<script src="../lib/underscore.min.js"></script> |
|||
<script src="../lib/sequence-diagram.min.js"></script> |
|||
<script src="../lib/flowchart.min.js"></script> |
|||
<script src="../lib/jquery.flowchart.min.js"></script> |
|||
|
|||
<script src="../editormd.js"></script> |
|||
<script type="text/javascript"> |
|||
$(function() { |
|||
var testEditormdView, testEditormdView2; |
|||
|
|||
$.get("test.md", function(markdown) { |
|||
|
|||
testEditormdView = editormd.markdownToHTML("test-editormd-view", { |
|||
markdown : markdown ,//+ "\r\n" + $("#append-test").text(), |
|||
//htmlDecode : true, // 开启 HTML 标签解析，为了安全性，默认不开启 |
|||
htmlDecode : "style,script,iframe", // you can filter tags decode |
|||
//toc : false, |
|||
tocm : true, // Using [TOCM] |
|||
//tocContainer : "#custom-toc-container", // 自定义 ToC 容器层 |
|||
//gfm : false, |
|||
//tocDropdown : true, |
|||
// markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签 |
|||
emoji : true, |
|||
taskList : true, |
|||
tex : true, // 默认不解析 |
|||
flowChart : true, // 默认不解析 |
|||
sequenceDiagram : true, // 默认不解析 |
|||
}); |
|||
|
|||
//console.log("返回一个 jQuery 实例 =>", testEditormdView); |
|||
|
|||
// 获取Markdown源码 |
|||
//console.log(testEditormdView.getMarkdown()); |
|||
|
|||
//alert(testEditormdView.getMarkdown()); |
|||
}); |
|||
|
|||
testEditormdView2 = editormd.markdownToHTML("test-editormd-view2", { |
|||
htmlDecode : "style,script,iframe", // you can filter tags decode |
|||
emoji : true, |
|||
taskList : true, |
|||
tex : true, // 默认不解析 |
|||
flowChart : true, // 默认不解析 |
|||
sequenceDiagram : true, // 默认不解析 |
|||
}); |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
<!DOCTYPE html> |
|||
<html lang="zh"> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<title>HTML Preview(markdown to html) - Editor.md examples</title> |
|||
<link rel="stylesheet" href="css/style.css" /> |
|||
<link rel="stylesheet" href="../css/editormd.preview.css" /> |
|||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" /> |
|||
<style> |
|||
.editormd-html-preview { |
|||
width: 90%; |
|||
margin: 0 auto; |
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div id="layout"> |
|||
<header> |
|||
<h1>Markdown转HTML的显示处理</h1> |
|||
<p>即：非编辑情况下的HTML预览</p> |
|||
<p>HTML Preview(markdown to html)</p> |
|||
</header> |
|||
<div class="btns"> |
|||
<button onclick="location.href='./html-preview-markdown-to-html-custom-toc-container.html';">将 ToC 移到自定义容器层</button> |
|||
</div> |
|||
<div id="test-editormd-view"> |
|||
<textarea style="display:none;" name="test-editormd-markdown-doc">###Hello world!</textarea> |
|||
</div> |
|||
<div id="test-editormd-view2"> |
|||
<textarea id="append-test" style="display:none;"> |
|||
|
|||
### 科学公式 TeX(KaTeX) |
|||
|
|||
$$E=mc^2$$ |
|||
|
|||
行内的公式$$E=mc^2$$行内的公式，行内的$$E=mc^2$$公式。 |
|||
|
|||
$$\(\sqrt{3x-1}+(1+x)^2\)$$ |
|||
|
|||
$$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$ |
|||
|
|||
$$X^2 > Y$$ |
|||
|
|||
##### 上标和下标 |
|||
|
|||
上标：X<sup>2</sup> |
|||
|
|||
下标：O<sub>2</sub> |
|||
|
|||
##### 代码块里包含的过滤标签及属性不会被过滤 |
|||
|
|||
```html |
|||
<style type="text/style"> |
|||
body{background:red;} |
|||
</style> |
|||
|
|||
<script type="text/javscript"> |
|||
alert("script"); |
|||
</script> |
|||
|
|||
<iframe height=498 width=510 src="http://player.youku.com/embed/XMzA0MzIwMDgw" frameborder=0 allowfullscreen></iframe> |
|||
``` |
|||
|
|||
##### Style |
|||
|
|||
<style> |
|||
body{background:red;} |
|||
</style> |
|||
|
|||
<style type="text/style"> |
|||
body{background:red;} |
|||
</style> |
|||
|
|||
##### Script |
|||
|
|||
<script> |
|||
alert("script"); |
|||
</script> |
|||
|
|||
<script type="text/javscript"> |
|||
alert("script"); |
|||
</script></textarea> |
|||
</div> |
|||
</div> |
|||
<!-- <script src="js/zepto.min.js"></script> |
|||
<script> |
|||
var jQuery = Zepto; // 为了避免修改flowChart.js和sequence-diagram.js的源码，所以使用Zepto.js时想支持flowChart/sequenceDiagram就得加上这一句 |
|||
</script> --> |
|||
<script src="js/jquery.min.js"></script> |
|||
<script src="../lib/marked.min.js"></script> |
|||
<script src="../lib/prettify.min.js"></script> |
|||
|
|||
<script src="../lib/raphael.min.js"></script> |
|||
<script src="../lib/underscore.min.js"></script> |
|||
<script src="../lib/sequence-diagram.min.js"></script> |
|||
<script src="../lib/flowchart.min.js"></script> |
|||
<script src="../lib/jquery.flowchart.min.js"></script> |
|||
|
|||
<script src="../editormd.js"></script> |
|||
<script type="text/javascript"> |
|||
$(function() { |
|||
var testEditormdView, testEditormdView2; |
|||
|
|||
$.get("test.md", function(markdown) { |
|||
|
|||
testEditormdView = editormd.markdownToHTML("test-editormd-view", { |
|||
markdown : markdown ,//+ "\r\n" + $("#append-test").text(), |
|||
//htmlDecode : true, // 开启 HTML 标签解析，为了安全性，默认不开启 |
|||
htmlDecode : "style,script,iframe", // you can filter tags decode |
|||
//toc : false, |
|||
tocm : true, // Using [TOCM] |
|||
//tocContainer : "#custom-toc-container", // 自定义 ToC 容器层 |
|||
//gfm : false, |
|||
//tocDropdown : true, |
|||
// markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签 |
|||
emoji : true, |
|||
taskList : true, |
|||
tex : true, // 默认不解析 |
|||
flowChart : true, // 默认不解析 |
|||
sequenceDiagram : true, // 默认不解析 |
|||
}); |
|||
|
|||
//console.log("返回一个 jQuery 实例 =>", testEditormdView); |
|||
|
|||
// 获取Markdown源码 |
|||
//console.log(testEditormdView.getMarkdown()); |
|||
|
|||
//alert(testEditormdView.getMarkdown()); |
|||
}); |
|||
|
|||
testEditormdView2 = editormd.markdownToHTML("test-editormd-view2", { |
|||
htmlDecode : "style,script,iframe", // you can filter tags decode |
|||
emoji : true, |
|||
taskList : true, |
|||
tex : true, // 默认不解析 |
|||
flowChart : true, // 默认不解析 |
|||
sequenceDiagram : true, // 默认不解析 |
|||
}); |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
|
|||
@ -1,119 +1,136 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh"> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<title>识别和解析 HTML 标签 - Editor.md examples</title> |
|||
<link rel="stylesheet" href="css/style.css" /> |
|||
<link rel="stylesheet" href="../css/editormd.css" /> |
|||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" /> |
|||
</head> |
|||
<body> |
|||
<div id="layout"> |
|||
<header> |
|||
<h1>识别和解析HTML标签</h1> |
|||
<p>HTML tags (filter) decode, You can increase safety by filtering the danger label.</p> |
|||
<p>注：虽然此功能能极大地扩展 Markdown 语法，但也面临着安全上的风险，所以默认是不开启的。</p> |
|||
<p>Update: 可以通过设置 `settings.htmlDecode = "style,script,iframe|on*"`来实现过滤指定标签及属性的解析，提高安全性；</p> |
|||
</header> |
|||
<div class="btns"> |
|||
<button class="filter-btn" exp="true">Unfilter</button> |
|||
<button class="filter-btn" exp="style,script,iframe|*">Filter style,script,iframe|*</button> |
|||
<button class="filter-btn" exp="style,script,iframe|on*">Filter style,script,iframe|on*</button> |
|||
<button class="filter-btn" exp="style,script,iframe|onclick,title,onmouseover,onmouseout,style">Filter style,script,iframe|onclick,title,onmouseover,onmouseout,style</button> |
|||
</div> |
|||
<div id="test-editormd"> |
|||
<textarea style="display:none;">#### 开启识别和解析 HTML 标签 |
|||
|
|||
配置项： |
|||
|
|||
{ |
|||
htmlDecode : true // Decode all html tags & attributes |
|||
// Filter tags/attributes expression : tagName,tagName,...|attrName,attrName,... |
|||
htmlDecode : "style,script,iframe,sub,sup|on*" // Filter tags, and all on* attributes |
|||
//htmlDecode : "style,script,iframe,sub,sup|*" // Filter tags, and all attributes |
|||
//htmlDecode : "style,script,iframe,sub,sup,embed|onclick,title,onmouseover,onmouseout,style" // Filter tags, and your custom attributes |
|||
} |
|||
|
|||
#### 示例 |
|||
|
|||
##### 上标和下标 |
|||
|
|||
上标：X<sup>2</sup> |
|||
|
|||
下标：O<sub>2</sub> |
|||
|
|||
##### 代码块里包含的过滤标签及属性不会被过滤 |
|||
|
|||
```html |
|||
<style type="text/style"> |
|||
body{background:red;} |
|||
</style> |
|||
|
|||
<script type="text/javscript"> |
|||
alert("script"); |
|||
</script> |
|||
|
|||
<iframe height=498 width=510 src="http://player.youku.com/embed/XMzA0MzIwMDgw" frameborder=0 allowfullscreen></iframe> |
|||
``` |
|||
|
|||
##### Style |
|||
|
|||
<style> |
|||
body{background:red;} |
|||
</style> |
|||
|
|||
<style type="text/style"> |
|||
body{background:red;} |
|||
</style> |
|||
|
|||
##### Script |
|||
|
|||
<script> |
|||
alert("script"); |
|||
</script> |
|||
|
|||
<script type="text/javscript"> |
|||
alert("script"); |
|||
</script> |
|||
|
|||
##### Events |
|||
|
|||
<div style="color:green;" onclick="alert(1233);" title="div xxxxx">Events</div> |
|||
<div style="color:red;" contenteditable onclick="alert(1233);" onmouseover="alert(1233);" onmouseout="alert(1233);" title="div xxxxx">Events</div> |
|||
|
|||
##### 插入Flash |
|||
|
|||
<embed src="http://player.youku.com/player.php/sid/XMzA0MzIwMDgw/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed> |
|||
|
|||
##### 插入视频 |
|||
|
|||
李健《最好不相见》 |
|||
|
|||
<iframe height=498 width=510 src="http://player.youku.com/embed/XMzA0MzIwMDgw" frameborder=0 allowfullscreen></iframe></textarea> |
|||
</div> |
|||
</div> |
|||
|
|||
<script src="js/jquery.min.js"></script> |
|||
<script src="../editormd.js"></script> |
|||
<script type="text/javascript"> |
|||
var testEditor; |
|||
|
|||
$(function() { |
|||
testEditor = editormd("test-editormd", { |
|||
width: "90%", |
|||
height: 720, |
|||
path : '../lib/', |
|||
htmlDecode : true, // Decode all html tags & attributes |
|||
// Expression : tagName,tagName,...|attrName,attrName,... |
|||
//htmlDecode : "style,script,iframe,sub,sup|on*" // Filter tags, and all on* attributes |
|||
//htmlDecode : "style,script,iframe,sub,sup|*" // Filter tags, and all attributes |
|||
//htmlDecode : "style,script,iframe,sub,sup,embed|onclick,title,onmouseover,onmouseout,style" // Filter tags, and your custom attributes |
|||
}); |
|||
|
|||
$(".filter-btn").click(function(){ |
|||
testEditor.config("htmlDecode", $(this).attr("exp")); |
|||
}); |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
<!DOCTYPE html> |
|||
<html lang="zh"> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<title>识别和解析 HTML 标签 - Editor.md examples</title> |
|||
<link rel="stylesheet" href="css/style.css" /> |
|||
<link rel="stylesheet" href="../css/editormd.css" /> |
|||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" /> |
|||
</head> |
|||
<body> |
|||
<div id="layout"> |
|||
<header> |
|||
<h1>识别和解析HTML标签</h1> |
|||
<p>HTML tags (filter) decode, You can increase safety by filtering the danger label.</p> |
|||
<p>注：虽然此功能能极大地扩展 Markdown 语法，但也面临着安全上的风险，所以默认是不开启的。</p> |
|||
<p>Update: 可以通过设置 `settings.htmlDecode = "style,script,iframe|on*"`来实现过滤指定标签及属性的解析，提高安全性；</p> |
|||
</header> |
|||
<div class="btns"> |
|||
<button class="filter-btn" exp="true">Unfilter</button> |
|||
<button class="filter-btn" exp="style,script,iframe|*">Filter style,script,iframe|*</button> |
|||
<button class="filter-btn" exp="style,script,iframe|on*">Filter style,script,iframe|on*</button> |
|||
<button class="filter-btn" exp="style,script,iframe|onclick,title,onmouseover,onmouseout,style">Filter style,script,iframe|onclick,title,onmouseover,onmouseout,style</button> |
|||
</div> |
|||
<div id="test-editormd"> |
|||
<textarea style="display:none;">[TOC] |
|||
|
|||
#### 开启识别和解析 HTML 标签 |
|||
|
|||
配置项： |
|||
|
|||
{ |
|||
htmlDecode : true // Decode all html tags & attributes |
|||
// Filter tags/attributes expression : tagName,tagName,...|attrName,attrName,... |
|||
htmlDecode : "style,script,iframe,sub,sup|on*" // Filter tags, and all on* attributes |
|||
//htmlDecode : "style,script,iframe,sub,sup|*" // Filter tags, and all attributes |
|||
//htmlDecode : "style,script,iframe,sub,sup,embed|onclick,title,onmouseover,onmouseout,style" // Filter tags, and your custom attributes |
|||
} |
|||
|
|||
#### 示例 |
|||
|
|||
##### 上标和下标 |
|||
|
|||
上标：X<sup>2</sup> |
|||
|
|||
下标：O<sub>2</sub> |
|||
|
|||
##### 代码块里包含的过滤标签及属性不会被过滤 |
|||
|
|||
```html |
|||
<style type="text/style"> |
|||
body{background:red;} |
|||
</style> |
|||
|
|||
<script type="text/javscript"> |
|||
alert("script"); |
|||
</script> |
|||
|
|||
<iframe height=498 width=510 src="http://player.youku.com/embed/XMzA0MzIwMDgw" frameborder=0 allowfullscreen></iframe> |
|||
``` |
|||
|
|||
#### **Strong text** Test |
|||
|
|||
##### Image |
|||
|
|||
<img src="http://editor.md.ipandao.com/images/logos/editormd-logo-64x64.png"/> |
|||
|
|||
<a href="https://github.com/pandao/editor.md"><img src="http://editor.md.ipandao.com/images/logos/editormd-logo-64x64.png"/></a> |
|||
|
|||
[](https://github.com/pandao/editor.md) |
|||
|
|||
:sweat_smile: :blush: :smiley: :relaxed: :smile: [:laughing:](https://github.com/pandao/editor.md) |
|||
|
|||
##### Style :sweat_smile: |
|||
|
|||
<style> |
|||
body{background:red;} |
|||
</style> |
|||
|
|||
<style type="text/style"> |
|||
body{background:red;} |
|||
</style> |
|||
|
|||
##### Script |
|||
|
|||
<script> |
|||
alert("script"); |
|||
</script> |
|||
|
|||
<script type="text/javscript"> |
|||
alert("script"); |
|||
</script> |
|||
|
|||
<a href="javascript:alert('xss')">a javascript:alert("xss")</a> |
|||
|
|||
##### Events |
|||
|
|||
<div style="color:green;" onclick="alert(1233);" title="div xxxxx">Events</div> |
|||
<div style="color:red;" contenteditable onclick="alert(1233);" onmouseover="alert(1233);" onmouseout="alert(1233);" title="div xxxxx">Events</div> |
|||
|
|||
##### 插入Flash |
|||
|
|||
<embed src="http://player.youku.com/player.php/sid/XMzA0MzIwMDgw/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed> |
|||
|
|||
##### 插入视频 |
|||
|
|||
李健《最好不相见》 |
|||
|
|||
<iframe height=498 width=510 src="http://player.youku.com/embed/XMzA0MzIwMDgw" frameborder=0 allowfullscreen></iframe></textarea> |
|||
</div> |
|||
</div> |
|||
|
|||
<script src="js/jquery.min.js"></script> |
|||
<script src="../editormd.js"></script> |
|||
<script type="text/javascript"> |
|||
var testEditor; |
|||
|
|||
$(function() { |
|||
testEditor = editormd("test-editormd", { |
|||
width: "90%", |
|||
height: 720, |
|||
path : '../lib/', |
|||
emoji: true, |
|||
htmlDecode : true, // Decode all html tags & attributes |
|||
// Expression : tagName,tagName,...|attrName,attrName,... |
|||
htmlDecode : "style,script,iframe,sub,sup|on*" // Filter tags, and all on* attributes |
|||
// htmlDecode : "style,script,iframe,sub,sup|*" // Filter tags, and all attributes, TOC not parsing |
|||
//htmlDecode : "style,script,iframe,sub,sup,embed|onclick,title,onmouseover,onmouseout,style" // Filter tags, and your custom attributes |
|||
}); |
|||
|
|||
$(".filter-btn").click(function(){ |
|||
testEditor.config("htmlDecode", $(this).attr("exp")); |
|||
}); |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
|
|||
@ -1,65 +1,110 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh"> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<title>SequenceDiagram - Editor.md examples</title> |
|||
<link rel="stylesheet" href="css/style.css" /> |
|||
<link rel="stylesheet" href="../css/editormd.min.css" /> |
|||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" /> |
|||
</head> |
|||
<body> |
|||
<div id="layout"> |
|||
<header> |
|||
<h1>SequenceDiagram 时序图/序列图</h1> |
|||
<p>Based on SequenceDiagram.js：<a href="http://bramp.github.io/js-sequence-diagrams/" target="_blank">http://bramp.github.io/js-sequence-diagrams/</a></p> |
|||
</header> |
|||
<div id="test-editormd"> |
|||
<textarea style="display:none;">#### Setting |
|||
|
|||
{ |
|||
sequenceDiagram : true |
|||
} |
|||
|
|||
#### Syntax |
|||
|
|||
```seq |
|||
......... |
|||
``` |
|||
|
|||
# or |
|||
|
|||
```sequence |
|||
......... |
|||
``` |
|||
|
|||
#### Example |
|||
|
|||
```seq |
|||
A->B: Message |
|||
B->C: Message |
|||
C->A: Message |
|||
``` |
|||
|
|||
```sequence |
|||
Andrew->China: Says Hello |
|||
Note right of China: China thinks\nabout it |
|||
China-->Andrew: How are you? |
|||
Andrew->>China: I am good thanks! |
|||
```</textarea> |
|||
</div> |
|||
</div> |
|||
|
|||
<script src="js/jquery.min.js"></script> |
|||
<script src="../editormd.js"></script> |
|||
<script type="text/javascript"> |
|||
$(function() { |
|||
var testEditor = editormd("test-editormd", { |
|||
width: "90%", |
|||
height: 640, |
|||
path : '../lib/', |
|||
sequenceDiagram : true |
|||
}); |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
<!DOCTYPE html> |
|||
<html lang="zh"> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<title>SequenceDiagram - Editor.md examples</title> |
|||
<link rel="stylesheet" href="css/style.css" /> |
|||
<link rel="stylesheet" href="../css/editormd.min.css" /> |
|||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" /> |
|||
</head> |
|||
<body> |
|||
<div id="layout"> |
|||
<header> |
|||
<h1>SequenceDiagram 时序图/序列图</h1> |
|||
<p>Based on SequenceDiagram.js：<a href="http://bramp.github.io/js-sequence-diagrams/" target="_blank">http://bramp.github.io/js-sequence-diagrams/</a></p> |
|||
<br/> |
|||
<p>Web Sequence Diagrams Syntax Examples: <a href="https://www.websequencediagrams.com/" target="_blank">https://www.websequencediagrams.com/</a></p> |
|||
</header> |
|||
<div id="test-editormd"> |
|||
<textarea style="display:none;">#### Setting |
|||
|
|||
{ |
|||
sequenceDiagram : true |
|||
} |
|||
|
|||
#### Syntax |
|||
|
|||
```seq |
|||
......... |
|||
``` |
|||
|
|||
# or |
|||
|
|||
```sequence |
|||
......... |
|||
``` |
|||
|
|||
#### Examples |
|||
|
|||
```seq |
|||
A->B: Message |
|||
B->C: Message |
|||
C->A: Message |
|||
``` |
|||
|
|||
```seq |
|||
Title: Here is a title |
|||
A->B: Normal line |
|||
B-->C: Dashed line |
|||
C->>D: Open arrow |
|||
D-->>A: Dashed open arrow |
|||
``` |
|||
|
|||
```seq |
|||
D->A: text xxxx |
|||
A->B: text xxxx |
|||
B->A: Wow! |
|||
A->D: Hi~ |
|||
``` |
|||
|
|||
```seq |
|||
A->A: text |
|||
A-->B: text |
|||
note right of A: Note Text |
|||
``` |
|||
|
|||
```seq |
|||
# Example of a comment. |
|||
Note left of A: Note to the\n left of A |
|||
Note right of A: Note to the\n right of A |
|||
Note over A: Note over A |
|||
Note over A,B: Note over both A and B |
|||
``` |
|||
|
|||
```seq |
|||
participant C |
|||
participant B |
|||
participant A |
|||
Note right of A: By listing the participants\n you can change their order |
|||
``` |
|||
|
|||
```seq |
|||
A->+B: text |
|||
B-->A: text |
|||
Note right of A: Note A |
|||
note over A,B: Note over A-B |
|||
``` |
|||
|
|||
```sequence |
|||
Andrew->China: Says Hello |
|||
Note right of China: China thinks\nabout it |
|||
China-->Andrew: How are you? |
|||
Andrew->>China: I am good thanks! |
|||
```</textarea> |
|||
</div> |
|||
</div> |
|||
|
|||
<script src="js/jquery.min.js"></script> |
|||
<script src="../editormd.js"></script> |
|||
<script type="text/javascript"> |
|||
$(function() { |
|||
var testEditor = editormd("test-editormd", { |
|||
width: "90%", |
|||
height: 640, |
|||
path : '../lib/', |
|||
sequenceDiagram : true |
|||
}); |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
|
|||
@ -1,365 +1,367 @@ |
|||
# Editor.md |
|||
|
|||
 |
|||
|
|||
      |
|||
|
|||
**目录 (Table of Contents)** |
|||
|
|||
[TOCM] |
|||
|
|||
[TOC] |
|||
|
|||
# Heading 1 |
|||
## Heading 2 |
|||
### Heading 3 |
|||
#### Heading 4 |
|||
##### Heading 5 |
|||
###### Heading 6 |
|||
# Heading 1 link [Heading link](https://github.com/pandao/editor.md "Heading link") |
|||
## Heading 2 link [Heading link](https://github.com/pandao/editor.md "Heading link") |
|||
### Heading 3 link [Heading link](https://github.com/pandao/editor.md "Heading link") |
|||
#### Heading 4 link [Heading link](https://github.com/pandao/editor.md "Heading link") Heading link [Heading link](https://github.com/pandao/editor.md "Heading link") |
|||
##### Heading 5 link [Heading link](https://github.com/pandao/editor.md "Heading link") |
|||
###### Heading 6 link [Heading link](https://github.com/pandao/editor.md "Heading link") |
|||
|
|||
#### 标题（用底线的形式）Heading (underline) |
|||
|
|||
This is an H1 |
|||
============= |
|||
|
|||
This is an H2 |
|||
------------- |
|||
|
|||
### 字符效果和横线等 |
|||
|
|||
---- |
|||
|
|||
~~删除线~~ <s>删除线（开启识别HTML标签时）</s> |
|||
*斜体字* _斜体字_ |
|||
**粗体** __粗体__ |
|||
***粗斜体*** ___粗斜体___ |
|||
|
|||
上标：X<sub>2</sub>，下标：O<sup>2</sup> |
|||
|
|||
**缩写(同HTML的abbr标签)** |
|||
|
|||
> 即更长的单词或短语的缩写形式，前提是开启识别HTML标签时，已默认开启 |
|||
|
|||
The <abbr title="Hyper Text Markup Language">HTML</abbr> specification is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>. |
|||
|
|||
### 引用 Blockquotes |
|||
|
|||
> 引用文本 Blockquotes |
|||
|
|||
引用的行内混合 Blockquotes |
|||
|
|||
> 引用：如果想要插入空白换行`即<br />标签`，在插入处先键入两个以上的空格然后回车即可，[普通链接](http://localhost/)。 |
|||
|
|||
### 锚点与链接 Links |
|||
|
|||
[普通链接](http://localhost/) |
|||
|
|||
[普通链接带标题](http://localhost/ "普通链接带标题") |
|||
|
|||
直接链接：<https://github.com> |
|||
|
|||
[锚点链接][anchor-id] |
|||
|
|||
[anchor-id]: http://www.this-anchor-link.com/ |
|||
|
|||
[mailto:test.test@gmail.com](mailto:test.test@gmail.com) |
|||
|
|||
GFM a-tail link @pandao 邮箱地址自动链接 test.test@gmail.com www@vip.qq.com |
|||
|
|||
> @pandao |
|||
|
|||
### 多语言代码高亮 Codes |
|||
|
|||
#### 行内代码 Inline code |
|||
|
|||
执行命令：`npm install marked` |
|||
|
|||
#### 缩进风格 |
|||
|
|||
即缩进四个空格，也做为实现类似 `<pre>` 预格式化文本 ( Preformatted Text ) 的功能。 |
|||
|
|||
<?php |
|||
echo "Hello world!"; |
|||
?> |
|||
|
|||
预格式化文本： |
|||
|
|||
| First Header | Second Header | |
|||
| ------------- | ------------- | |
|||
| Content Cell | Content Cell | |
|||
| Content Cell | Content Cell | |
|||
|
|||
#### JS代码 |
|||
|
|||
```javascript |
|||
function test() { |
|||
console.log("Hello world!"); |
|||
} |
|||
|
|||
(function(){ |
|||
var box = function() { |
|||
return box.fn.init(); |
|||
}; |
|||
|
|||
box.prototype = box.fn = { |
|||
init : function(){ |
|||
console.log('box.init()'); |
|||
|
|||
return this; |
|||
}, |
|||
|
|||
add : function(str) { |
|||
alert("add", str); |
|||
|
|||
return this; |
|||
}, |
|||
|
|||
remove : function(str) { |
|||
alert("remove", str); |
|||
|
|||
return this; |
|||
} |
|||
}; |
|||
|
|||
box.fn.init.prototype = box.fn; |
|||
|
|||
window.box =box; |
|||
})(); |
|||
|
|||
var testBox = box(); |
|||
testBox.add("jQuery").remove("jQuery"); |
|||
``` |
|||
|
|||
#### HTML 代码 HTML codes |
|||
|
|||
```html |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<mate charest="utf-8" /> |
|||
<meta name="keywords" content="Editor.md, Markdown, Editor" /> |
|||
<title>Hello world!</title> |
|||
<style type="text/css"> |
|||
body{font-size:14px;color:#444;font-family: "Microsoft Yahei", Tahoma, "Hiragino Sans GB", Arial;background:#fff;} |
|||
ul{list-style: none;} |
|||
img{border:none;vertical-align: middle;} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<h1 class="text-xxl">Hello world!</h1> |
|||
<p class="text-green">Plain text</p> |
|||
</body> |
|||
</html> |
|||
``` |
|||
|
|||
### 图片 Images |
|||
|
|||
Image: |
|||
|
|||
 |
|||
|
|||
> Follow your heart. |
|||
|
|||
 |
|||
|
|||
> 图为：厦门白城沙滩 |
|||
|
|||
图片加链接 (Image + Link)： |
|||
|
|||
[](https://pandao.github.io/editor.md/images/7.jpg "李健首张专辑《似水流年》封面") |
|||
|
|||
> 图为：李健首张专辑《似水流年》封面 |
|||
|
|||
---- |
|||
|
|||
### 列表 Lists |
|||
|
|||
#### 无序列表（减号）Unordered Lists (-) |
|||
|
|||
- 列表一 |
|||
- 列表二 |
|||
- 列表三 |
|||
|
|||
#### 无序列表（星号）Unordered Lists (*) |
|||
|
|||
* 列表一 |
|||
* 列表二 |
|||
* 列表三 |
|||
|
|||
#### 无序列表（加号和嵌套）Unordered Lists (+) |
|||
|
|||
+ 列表一 |
|||
+ 列表二 |
|||
+ 列表二-1 |
|||
+ 列表二-2 |
|||
+ 列表二-3 |
|||
+ 列表三 |
|||
* 列表一 |
|||
* 列表二 |
|||
* 列表三 |
|||
|
|||
#### 有序列表 Ordered Lists (-) |
|||
|
|||
1. 第一行 |
|||
2. 第二行 |
|||
3. 第三行 |
|||
|
|||
#### GFM task list |
|||
|
|||
- [x] GFM task list 1 |
|||
- [x] GFM task list 2 |
|||
- [ ] GFM task list 3 |
|||
- [ ] GFM task list 3-1 |
|||
- [ ] GFM task list 3-2 |
|||
- [ ] GFM task list 3-3 |
|||
- [ ] GFM task list 4 |
|||
- [ ] GFM task list 4-1 |
|||
- [ ] GFM task list 4-2 |
|||
|
|||
---- |
|||
|
|||
### 绘制表格 Tables |
|||
|
|||
| 项目 | 价格 | 数量 | |
|||
| -------- | -----: | :----: | |
|||
| 计算机 | $1600 | 5 | |
|||
| 手机 | $12 | 12 | |
|||
| 管线 | $1 | 234 | |
|||
|
|||
First Header | Second Header |
|||
------------- | ------------- |
|||
Content Cell | Content Cell |
|||
Content Cell | Content Cell |
|||
|
|||
| First Header | Second Header | |
|||
| ------------- | ------------- | |
|||
| Content Cell | Content Cell | |
|||
| Content Cell | Content Cell | |
|||
|
|||
| Function name | Description | |
|||
| ------------- | ------------------------------ | |
|||
| `help()` | Display the help window. | |
|||
| `destroy()` | **Destroy your computer!** | |
|||
|
|||
| Left-Aligned | Center Aligned | Right Aligned | |
|||
| :------------ |:---------------:| -----:| |
|||
| col 3 is | some wordy text | $1600 | |
|||
| col 2 is | centered | $12 | |
|||
| zebra stripes | are neat | $1 | |
|||
|
|||
| Item | Value | |
|||
| --------- | -----:| |
|||
| Computer | $1600 | |
|||
| Phone | $12 | |
|||
| Pipe | $1 | |
|||
|
|||
---- |
|||
|
|||
#### 特殊符号 HTML Entities Codes |
|||
|
|||
© & ¨ ™ ¡ £ |
|||
& < > ¥ € ® ± ¶ § ¦ ¯ « · |
|||
|
|||
X² Y³ ¾ ¼ × ÷ » |
|||
|
|||
18ºC " ' |
|||
|
|||
[========] |
|||
|
|||
### Emoji表情 :smiley: |
|||
|
|||
> Blockquotes :star: |
|||
|
|||
#### GFM task lists & Emoji & fontAwesome icon emoji & editormd logo emoji :editormd-logo-5x: |
|||
|
|||
- [x] :smiley: @mentions, :smiley: #refs, [links](), **formatting**, and <del>tags</del> supported :editormd-logo:; |
|||
- [x] list syntax required (any unordered or ordered list supported) :editormd-logo-3x:; |
|||
- [x] [ ] :smiley: this is a complete item :smiley:; |
|||
- [ ] []this is an incomplete item [test link](#) :fa-star: @pandao; |
|||
- [ ] [ ]this is an incomplete item :fa-star: :fa-gear:; |
|||
- [ ] :smiley: this is an incomplete item [test link](#) :fa-star: :fa-gear:; |
|||
- [ ] :smiley: this is :fa-star: :fa-gear: an incomplete item [test link](#); |
|||
|
|||
#### 反斜杠 Escape |
|||
|
|||
\*literal asterisks\* |
|||
|
|||
[========] |
|||
|
|||
### 科学公式 TeX(KaTeX) |
|||
|
|||
$$E=mc^2$$ |
|||
|
|||
行内的公式$$E=mc^2$$行内的公式，行内的$$E=mc^2$$公式。 |
|||
|
|||
$$x > y$$ |
|||
|
|||
$$\(\sqrt{3x-1}+(1+x)^2\)$$ |
|||
|
|||
$$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$ |
|||
|
|||
多行公式： |
|||
|
|||
```math |
|||
\displaystyle |
|||
\left( \sum\_{k=1}^n a\_k b\_k \right)^2 |
|||
\leq |
|||
\left( \sum\_{k=1}^n a\_k^2 \right) |
|||
\left( \sum\_{k=1}^n b\_k^2 \right) |
|||
``` |
|||
|
|||
```katex |
|||
\displaystyle |
|||
\frac{1}{ |
|||
\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{ |
|||
\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} { |
|||
1+\frac{e^{-6\pi}} |
|||
{1+\frac{e^{-8\pi}} |
|||
{1+\cdots} } |
|||
} |
|||
} |
|||
``` |
|||
|
|||
```latex |
|||
f(x) = \int_{-\infty}^\infty |
|||
\hat f(\xi)\,e^{2 \pi i \xi x} |
|||
\,d\xi |
|||
``` |
|||
|
|||
### 分页符 Page break |
|||
|
|||
> Print Test: Ctrl + P |
|||
|
|||
[========] |
|||
|
|||
### 绘制流程图 Flowchart |
|||
|
|||
```flow |
|||
st=>start: 用户登陆 |
|||
op=>operation: 登陆操作 |
|||
cond=>condition: 登陆成功 Yes or No? |
|||
e=>end: 进入后台 |
|||
|
|||
st->op->cond |
|||
cond(yes)->e |
|||
cond(no)->op |
|||
``` |
|||
|
|||
[========] |
|||
|
|||
### 绘制序列图 Sequence Diagram |
|||
|
|||
```seq |
|||
Andrew->China: Says Hello |
|||
Note right of China: China thinks\nabout it |
|||
China-->Andrew: How are you? |
|||
Andrew->>China: I am good thanks! |
|||
``` |
|||
|
|||
### End |
|||
# Editor.md |
|||
|
|||
 |
|||
|
|||
      |
|||
|
|||
**目录 (Table of Contents)** |
|||
|
|||
[TOCM] |
|||
|
|||
[TOC] |
|||
|
|||
# Heading 1 |
|||
## Heading 2 |
|||
### Heading 3 |
|||
#### Heading 4 |
|||
##### Heading 5 |
|||
###### Heading 6 |
|||
# Heading 1 link [Heading link](https://github.com/pandao/editor.md "Heading link") |
|||
## Heading 2 link [Heading link](https://github.com/pandao/editor.md "Heading link") |
|||
### Heading 3 link [Heading link](https://github.com/pandao/editor.md "Heading link") |
|||
#### Heading 4 link [Heading link](https://github.com/pandao/editor.md "Heading link") Heading link [Heading link](https://github.com/pandao/editor.md "Heading link") |
|||
##### Heading 5 link [Heading link](https://github.com/pandao/editor.md "Heading link") |
|||
###### Heading 6 link [Heading link](https://github.com/pandao/editor.md "Heading link") |
|||
|
|||
#### 标题（用底线的形式）Heading (underline) |
|||
|
|||
This is an H1 |
|||
============= |
|||
|
|||
This is an H2 |
|||
------------- |
|||
|
|||
### 字符效果和横线等 |
|||
|
|||
---- |
|||
|
|||
~~删除线~~ <s>删除线（开启识别HTML标签时）</s> |
|||
*斜体字* _斜体字_ |
|||
**粗体** __粗体__ |
|||
***粗斜体*** ___粗斜体___ |
|||
|
|||
上标：X<sub>2</sub>，下标：O<sup>2</sup> |
|||
|
|||
**缩写(同HTML的abbr标签)** |
|||
|
|||
> 即更长的单词或短语的缩写形式，前提是开启识别HTML标签时，已默认开启 |
|||
|
|||
The <abbr title="Hyper Text Markup Language">HTML</abbr> specification is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>. |
|||
|
|||
### 引用 Blockquotes |
|||
|
|||
> 引用文本 Blockquotes |
|||
|
|||
引用的行内混合 Blockquotes |
|||
|
|||
> 引用：如果想要插入空白换行`即<br />标签`，在插入处先键入两个以上的空格然后回车即可，[普通链接](http://localhost/)。 |
|||
|
|||
### 锚点与链接 Links |
|||
|
|||
[普通链接](http://localhost/) |
|||
|
|||
[普通链接带标题](http://localhost/ "普通链接带标题") |
|||
|
|||
直接链接：<https://github.com> |
|||
|
|||
[锚点链接][anchor-id] |
|||
|
|||
[anchor-id]: http://www.this-anchor-link.com/ |
|||
|
|||
[mailto:test.test@gmail.com](mailto:test.test@gmail.com) |
|||
|
|||
GFM a-tail link @pandao 邮箱地址自动链接 test.test@gmail.com www@vip.qq.com |
|||
|
|||
> @pandao |
|||
|
|||
### 多语言代码高亮 Codes |
|||
|
|||
#### 行内代码 Inline code |
|||
|
|||
执行命令：`npm install marked` |
|||
|
|||
#### 缩进风格 |
|||
|
|||
即缩进四个空格，也做为实现类似 `<pre>` 预格式化文本 ( Preformatted Text ) 的功能。 |
|||
|
|||
<?php |
|||
echo "Hello world!"; |
|||
?> |
|||
|
|||
预格式化文本： |
|||
|
|||
| First Header | Second Header | |
|||
| ------------- | ------------- | |
|||
| Content Cell | Content Cell | |
|||
| Content Cell | Content Cell | |
|||
|
|||
#### JS代码 |
|||
|
|||
```javascript |
|||
function test() { |
|||
console.log("Hello world!"); |
|||
} |
|||
|
|||
(function(){ |
|||
var box = function() { |
|||
return box.fn.init(); |
|||
}; |
|||
|
|||
box.prototype = box.fn = { |
|||
init : function(){ |
|||
console.log('box.init()'); |
|||
|
|||
return this; |
|||
}, |
|||
|
|||
add : function(str) { |
|||
alert("add", str); |
|||
|
|||
return this; |
|||
}, |
|||
|
|||
remove : function(str) { |
|||
alert("remove", str); |
|||
|
|||
return this; |
|||
} |
|||
}; |
|||
|
|||
box.fn.init.prototype = box.fn; |
|||
|
|||
window.box =box; |
|||
})(); |
|||
|
|||
var testBox = box(); |
|||
testBox.add("jQuery").remove("jQuery"); |
|||
``` |
|||
|
|||
#### HTML 代码 HTML codes |
|||
|
|||
```html |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<mate charest="utf-8" /> |
|||
<meta name="keywords" content="Editor.md, Markdown, Editor" /> |
|||
<title>Hello world!</title> |
|||
<style type="text/css"> |
|||
body{font-size:14px;color:#444;font-family: "Microsoft Yahei", Tahoma, "Hiragino Sans GB", Arial;background:#fff;} |
|||
ul{list-style: none;} |
|||
img{border:none;vertical-align: middle;} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<h1 class="text-xxl">Hello world!</h1> |
|||
<p class="text-green">Plain text</p> |
|||
</body> |
|||
</html> |
|||
``` |
|||
|
|||
### 图片 Images |
|||
|
|||
Image: |
|||
|
|||
 |
|||
|
|||
> Follow your heart. |
|||
|
|||
 |
|||
|
|||
> 图为：厦门白城沙滩 |
|||
|
|||
图片加链接 (Image + Link)： |
|||
|
|||
[](https://pandao.github.io/editor.md/images/7.jpg "李健首张专辑《似水流年》封面") |
|||
|
|||
> 图为：李健首张专辑《似水流年》封面 |
|||
|
|||
---- |
|||
|
|||
### 列表 Lists |
|||
|
|||
#### 无序列表（减号）Unordered Lists (-) |
|||
|
|||
- 列表一 |
|||
- 列表二 |
|||
- 列表三 |
|||
|
|||
#### 无序列表（星号）Unordered Lists (*) |
|||
|
|||
* 列表一 |
|||
* 列表二 |
|||
* 列表三 |
|||
|
|||
#### 无序列表（加号和嵌套）Unordered Lists (+) |
|||
|
|||
+ 列表一 |
|||
+ 列表二 |
|||
+ 列表二-1 |
|||
+ 列表二-2 |
|||
+ 列表二-3 |
|||
+ 列表三 |
|||
* 列表一 |
|||
* 列表二 |
|||
* 列表三 |
|||
|
|||
#### 有序列表 Ordered Lists (-) |
|||
|
|||
1. 第一行 |
|||
2. 第二行 |
|||
3. 第三行 |
|||
|
|||
#### GFM task list |
|||
|
|||
- [x] GFM task list 1 |
|||
- [x] GFM task list 2 |
|||
- [ ] GFM task list 3 |
|||
- [ ] GFM task list 3-1 |
|||
- [ ] GFM task list 3-2 |
|||
- [ ] GFM task list 3-3 |
|||
- [ ] GFM task list 4 |
|||
- [ ] GFM task list 4-1 |
|||
- [ ] GFM task list 4-2 |
|||
|
|||
---- |
|||
|
|||
### 绘制表格 Tables |
|||
|
|||
| 项目 | 价格 | 数量 | |
|||
| -------- | -----: | :----: | |
|||
| 计算机 | $1600 | 5 | |
|||
| 手机 | $12 | 12 | |
|||
| 管线 | $1 | 234 | |
|||
|
|||
First Header | Second Header |
|||
------------- | ------------- |
|||
Content Cell | Content Cell |
|||
Content Cell | Content Cell |
|||
|
|||
| First Header | Second Header | |
|||
| ------------- | ------------- | |
|||
| Content Cell | Content Cell | |
|||
| Content Cell | Content Cell | |
|||
|
|||
| Function name | Description | |
|||
| ------------- | ------------------------------ | |
|||
| `help()` | Display the help window. | |
|||
| `destroy()` | **Destroy your computer!** | |
|||
|
|||
| Left-Aligned | Center Aligned | Right Aligned | |
|||
| :------------ |:---------------:| -----:| |
|||
| col 3 is | some wordy text | $1600 | |
|||
| col 2 is | centered | $12 | |
|||
| zebra stripes | are neat | $1 | |
|||
|
|||
| Item | Value | |
|||
| --------- | -----:| |
|||
| Computer | $1600 | |
|||
| Phone | $12 | |
|||
| Pipe | $1 | |
|||
|
|||
---- |
|||
|
|||
#### 特殊符号 HTML Entities Codes |
|||
|
|||
© & ¨ ™ ¡ £ |
|||
& < > ¥ € ® ± ¶ § ¦ ¯ « · |
|||
|
|||
X² Y³ ¾ ¼ × ÷ » |
|||
|
|||
18ºC " ' |
|||
|
|||
#### **简要描述** |
|||
|
|||
[========] |
|||
|
|||
### Emoji表情 :smiley: |
|||
|
|||
> Blockquotes :star: |
|||
|
|||
#### GFM task lists & Emoji & fontAwesome icon emoji & editormd logo emoji :editormd-logo-2x: |
|||
|
|||
- [x] :smiley: @mentions, :smiley: #refs, [links](), **formatting**, and <del>tags</del> supported :editormd-logo:; |
|||
- [x] list syntax required (any unordered or ordered list supported) :editormd-logo-3x:; |
|||
- [x] [ ] :smiley: this is a complete item :smiley:; |
|||
- [ ] []this is an incomplete item [test link](#) :fa-star: @pandao; |
|||
- [ ] [ ]this is an incomplete item :fa-star: :fa-gear:; |
|||
- [ ] :smiley: this is an incomplete item [test link](#) :fa-star: :fa-gear:; |
|||
- [ ] :smiley: this is :fa-star: :fa-gear: an incomplete item [test link](#); |
|||
|
|||
#### 反斜杠 Escape |
|||
|
|||
\*literal asterisks\* |
|||
|
|||
[========] |
|||
|
|||
### 科学公式 TeX(KaTeX) |
|||
|
|||
$$E=mc^2$$ |
|||
|
|||
行内的公式$$E=mc^2$$行内的公式，行内的$$E=mc^2$$公式。 |
|||
|
|||
$$x > y$$ |
|||
|
|||
$$\(\sqrt{3x-1}+(1+x)^2\)$$ |
|||
|
|||
$$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$ |
|||
|
|||
多行公式： |
|||
|
|||
```math |
|||
\displaystyle |
|||
\left( \sum\_{k=1}^n a\_k b\_k \right)^2 |
|||
\leq |
|||
\left( \sum\_{k=1}^n a\_k^2 \right) |
|||
\left( \sum\_{k=1}^n b\_k^2 \right) |
|||
``` |
|||
|
|||
```katex |
|||
\displaystyle |
|||
\frac{1}{ |
|||
\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{ |
|||
\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} { |
|||
1+\frac{e^{-6\pi}} |
|||
{1+\frac{e^{-8\pi}} |
|||
{1+\cdots} } |
|||
} |
|||
} |
|||
``` |
|||
|
|||
```latex |
|||
f(x) = \int_{-\infty}^\infty |
|||
\hat f(\xi)\,e^{2 \pi i \xi x} |
|||
\,d\xi |
|||
``` |
|||
|
|||
### 分页符 Page break |
|||
|
|||
> Print Test: Ctrl + P |
|||
|
|||
[========] |
|||
|
|||
### 绘制流程图 Flowchart |
|||
|
|||
```flow |
|||
st=>start: 用户登陆 |
|||
op=>operation: 登陆操作 |
|||
cond=>condition: 登陆成功 Yes or No? |
|||
e=>end: 进入后台 |
|||
|
|||
st->op->cond |
|||
cond(yes)->e |
|||
cond(no)->op |
|||
``` |
|||
|
|||
[========] |
|||
|
|||
### 绘制序列图 Sequence Diagram |
|||
|
|||
```seq |
|||
Andrew->China: Says Hello |
|||
Note right of China: China thinks\nabout it |
|||
China-->Andrew: How are you? |
|||
Andrew->>China: I am good thanks! |
|||
``` |
|||
|
|||
### End |
|||
|
|||
@ -1,122 +1,135 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh"> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<title>Toolbar auto fixed - Editor.md examples</title> |
|||
<link rel="stylesheet" href="css/style.css" /> |
|||
<link rel="stylesheet" href="../css/editormd.css" /> |
|||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" /> |
|||
</head> |
|||
<body> |
|||
<div id="layout" style="height:3000px;"> |
|||
<header> |
|||
<h1>工具栏自动固定定位的开启与禁用</h1> |
|||
<p>Enable / disable toolbar auto fixed position.</p> |
|||
</header> |
|||
<div class="btns"> |
|||
<button id="enable-btn">Enable</button> |
|||
<button id="disable-btn">Disable</button> |
|||
</div> |
|||
<div id="test-editormd"> |
|||
<textarea style="display:none;">### Hello world! |
|||
|
|||
codemirror |
|||
In-browser code editor |
|||
|
|||
codemirror 6291 3 days ago |
|||
angular-ui-codemirror |
|||
This directive allows you to add CodeMirror to your textarea elements. |
|||
|
|||
angular-ui 174 6 weeks ago |
|||
share-codemirror |
|||
Codemirror bindings for ShareJS |
|||
|
|||
share 24 3 months ago |
|||
requirejs-codemirror |
|||
Load codemirror with needed modes and appending codemirror's css only when needed |
|||
|
|||
tuchk4 14 2 months ago |
|||
codemirror-interactive-numbers |
|||
Drag and update literal numbers inside codemirror |
|||
|
|||
fullstackio 4 17 months ago |
|||
cm-searchbox |
|||
CodeMirror addon for search and replace |
|||
|
|||
coderaiser 3 4 days ago |
|||
ng-codemirror-dictionary-hint |
|||
Angular directive that adds hint support to a Codemirror instance based on a custom dictionary. |
|||
|
|||
amarnus 3 3 months ago |
|||
opentok-editor |
|||
A real time collaborative editor for OpenTok using CodeMirror and ot.js |
|||
|
|||
aullman 3 2 weeks ago |
|||
cirru-mode |
|||
Cirru mode for CodeMorror |
|||
|
|||
Cirru 2 12 months ago |
|||
ckeditor-codemirror |
|||
A bower wrapper for the ckeditor codemirror plugin |
|||
|
|||
friedolinfoerder 1 2 weeks ago |
|||
cm-show-invisibles |
|||
Addon for CodeMirror that helps to show invisibles. |
|||
|
|||
coderaiser 1 6 days ago |
|||
angular-codemirror |
|||
Add CodeMirror to your AngularJS app |
|||
|
|||
chouseknecht 0 12 months ago |
|||
codemirror-chord |
|||
Codemirror mode for guitar chords |
|||
|
|||
zabudipar 0 3 weeks ago |
|||
codemirror-states |
|||
Export and import CodeMirror line classes, line widgets and markers |
|||
|
|||
lusever 0 12 days ago |
|||
ember-cli-codemirror-shim |
|||
ES6 module shim for CodeMirror. |
|||
|
|||
IvyApp 0 3 months ago |
|||
ivy-codemirror |
|||
Shim repository for ivy-codemirror. |
|||
|
|||
IvyApp 0 2 months ago |
|||
ng-codemirror |
|||
Allows you to integrate AngularJS and Codemirror with compatibility for RequireJS 2.x. |
|||
|
|||
VictorQueiroz 0 4 months ago |
|||
sml-codemirror-mode |
|||
Bower Distribution of the Sparqlification Mapping Language (SML) Syntax Highlighting Mode for CodeMirror |
|||
</textarea> |
|||
</div> |
|||
</div> |
|||
<script src="js/jquery.min.js"></script> |
|||
<script src="../editormd.js"></script> |
|||
<script type="text/javascript"> |
|||
var testEditor; |
|||
|
|||
$(function() { |
|||
testEditor = editormd("test-editormd", { |
|||
width : "90%", |
|||
height : 1600, |
|||
path : "../lib/" |
|||
}); |
|||
|
|||
$("#enable-btn").bind("click", function() { |
|||
testEditor.setToolbarAutoFixed(true); |
|||
// or |
|||
//testEditor.config("toolbarAutoFixed", true); |
|||
}); |
|||
|
|||
$("#disable-btn").bind("click", function() { |
|||
testEditor.setToolbarAutoFixed(false); |
|||
// or |
|||
//testEditor.config("toolbarAutoFixed", false); |
|||
}); |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
<!DOCTYPE html> |
|||
<html lang="zh"> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<title>Toolbar auto fixed - Editor.md examples</title> |
|||
<link rel="stylesheet" href="css/style.css" /> |
|||
<link rel="stylesheet" href="../css/editormd.css" /> |
|||
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" /> |
|||
</head> |
|||
<body> |
|||
<div id="layout" style="height: 4000px;"> |
|||
<header> |
|||
<h1>工具栏自动固定定位的开启与禁用</h1> |
|||
<p>Enable / disable toolbar auto fixed position.</p> |
|||
</header> |
|||
<div class="btns"> |
|||
<button id="enable-btn">Enable</button> |
|||
<button id="disable-btn">Disable</button> |
|||
<button id="set-offset-btn">Set editor offset(random)</button> |
|||
<button id="reset-offset-btn">Reset editor offset</button> |
|||
</div> |
|||
<div id="test-editormd"> |
|||
<textarea style="display:none;">### Hello world! |
|||
|
|||
codemirror |
|||
In-browser code editor |
|||
|
|||
codemirror 6291 3 days ago |
|||
angular-ui-codemirror |
|||
This directive allows you to add CodeMirror to your textarea elements. |
|||
|
|||
angular-ui 174 6 weeks ago |
|||
share-codemirror |
|||
Codemirror bindings for ShareJS |
|||
|
|||
share 24 3 months ago |
|||
requirejs-codemirror |
|||
Load codemirror with needed modes and appending codemirror's css only when needed |
|||
|
|||
tuchk4 14 2 months ago |
|||
codemirror-interactive-numbers |
|||
Drag and update literal numbers inside codemirror |
|||
|
|||
fullstackio 4 17 months ago |
|||
cm-searchbox |
|||
CodeMirror addon for search and replace |
|||
|
|||
coderaiser 3 4 days ago |
|||
ng-codemirror-dictionary-hint |
|||
Angular directive that adds hint support to a Codemirror instance based on a custom dictionary. |
|||
|
|||
amarnus 3 3 months ago |
|||
opentok-editor |
|||
A real time collaborative editor for OpenTok using CodeMirror and ot.js |
|||
|
|||
aullman 3 2 weeks ago |
|||
cirru-mode |
|||
Cirru mode for CodeMorror |
|||
|
|||
Cirru 2 12 months ago |
|||
ckeditor-codemirror |
|||
A bower wrapper for the ckeditor codemirror plugin |
|||
|
|||
friedolinfoerder 1 2 weeks ago |
|||
cm-show-invisibles |
|||
Addon for CodeMirror that helps to show invisibles. |
|||
|
|||
coderaiser 1 6 days ago |
|||
angular-codemirror |
|||
Add CodeMirror to your AngularJS app |
|||
|
|||
chouseknecht 0 12 months ago |
|||
codemirror-chord |
|||
Codemirror mode for guitar chords |
|||
|
|||
zabudipar 0 3 weeks ago |
|||
codemirror-states |
|||
Export and import CodeMirror line classes, line widgets and markers |
|||
|
|||
lusever 0 12 days ago |
|||
ember-cli-codemirror-shim |
|||
ES6 module shim for CodeMirror. |
|||
|
|||
IvyApp 0 3 months ago |
|||
ivy-codemirror |
|||
Shim repository for ivy-codemirror. |
|||
|
|||
IvyApp 0 2 months ago |
|||
ng-codemirror |
|||
Allows you to integrate AngularJS and Codemirror with compatibility for RequireJS 2.x. |
|||
|
|||
VictorQueiroz 0 4 months ago |
|||
sml-codemirror-mode |
|||
Bower Distribution of the Sparqlification Mapping Language (SML) Syntax Highlighting Mode for CodeMirror |
|||
</textarea> |
|||
</div> |
|||
</div> |
|||
<script src="js/jquery.min.js"></script> |
|||
<script src="../editormd.js"></script> |
|||
<script type="text/javascript"> |
|||
var testEditor; |
|||
|
|||
$(function() { |
|||
testEditor = editormd("test-editormd", { |
|||
width : "90%", |
|||
height : 1600, |
|||
path : "../lib/" |
|||
}); |
|||
|
|||
$("#enable-btn").bind("click", function() { |
|||
testEditor.setToolbarAutoFixed(true); |
|||
// or |
|||
//testEditor.config("toolbarAutoFixed", true); |
|||
}); |
|||
|
|||
$("#disable-btn").bind("click", function() { |
|||
testEditor.setToolbarAutoFixed(false); |
|||
// or |
|||
//testEditor.config("toolbarAutoFixed", false); |
|||
}); |
|||
|
|||
$("#set-offset-btn").click(function () { |
|||
testEditor.editor.css({ |
|||
marginLeft: editormd.rand(0, 200) + "px", |
|||
marginTop: editormd.rand(0, 1000) + "px" |
|||
}) |
|||
}); |
|||
|
|||
$("#reset-offset-btn").click(function () { |
|||
testEditor.editor.css("margin", "0 auto"); |
|||
}); |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,327 +1,312 @@ |
|||
/*! |
|||
* Emoji dialog plugin for Editor.md |
|||
* |
|||
* @file emoji-dialog.js |
|||
* @author pandao |
|||
* @version 1.2.0 |
|||
* @updateTime 2015-03-08 |
|||
* {@link https://github.com/pandao/editor.md}
|
|||
* @license MIT |
|||
*/ |
|||
|
|||
(function() { |
|||
|
|||
var factory = function (exports) { |
|||
|
|||
var $ = jQuery; |
|||
var pluginName = "emoji-dialog"; |
|||
var emojiTabIndex = 0; |
|||
var emojiData = []; |
|||
var selecteds = []; |
|||
|
|||
var logoPrefix = "editormd-logo"; |
|||
var logos = [ |
|||
logoPrefix, |
|||
logoPrefix + "-1x", |
|||
logoPrefix + "-2x", |
|||
logoPrefix + "-3x", |
|||
logoPrefix + "-4x", |
|||
logoPrefix + "-5x", |
|||
logoPrefix + "-6x", |
|||
logoPrefix + "-7x", |
|||
logoPrefix + "-8x" |
|||
]; |
|||
|
|||
var langs = { |
|||
"zh-cn" : { |
|||
toolbar : { |
|||
emoji : "Emoji 表情" |
|||
}, |
|||
dialog : { |
|||
emoji : { |
|||
title : "Emoji 表情" |
|||
} |
|||
} |
|||
}, |
|||
"zh-tw" : { |
|||
toolbar : { |
|||
emoji : "Emoji 表情" |
|||
}, |
|||
dialog : { |
|||
emoji : { |
|||
title : "Emoji 表情" |
|||
} |
|||
} |
|||
}, |
|||
"en" : { |
|||
toolbar : { |
|||
emoji : "Emoji" |
|||
}, |
|||
dialog : { |
|||
emoji : { |
|||
title : "Emoji" |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
|
|||
exports.fn.emojiDialog = function() { |
|||
var _this = this; |
|||
var cm = this.cm; |
|||
var settings = _this.settings; |
|||
|
|||
if (!settings.emoji) |
|||
{ |
|||
alert("settings.emoji == false"); |
|||
return ; |
|||
} |
|||
|
|||
var path = settings.pluginPath + pluginName + "/"; |
|||
var editor = this.editor; |
|||
var cursor = cm.getCursor(); |
|||
var selection = cm.getSelection(); |
|||
var classPrefix = this.classPrefix; |
|||
|
|||
$.extend(true, this.lang, langs[this.lang.name]); |
|||
this.setToolbar(); |
|||
|
|||
var lang = this.lang; |
|||
var dialogName = classPrefix + pluginName, dialog; |
|||
var dialogLang = lang.dialog.emoji; |
|||
|
|||
var dialogContent = [ |
|||
"<div class=\"" + classPrefix + "emoji-dialog-box\" style=\"width: 760px;height: 334px;margin-bottom: 8px;overflow: hidden;\">", |
|||
"<div class=\"" + classPrefix + "tab\"></div>", |
|||
"</div>", |
|||
].join("\n"); |
|||
|
|||
cm.focus(); |
|||
|
|||
if (editor.find("." + dialogName).length > 0) |
|||
{ |
|||
dialog = editor.find("." + dialogName); |
|||
|
|||
selecteds = []; |
|||
dialog.find("a").removeClass("selected"); |
|||
|
|||
this.dialogShowMask(dialog); |
|||
this.dialogLockScreen(); |
|||
dialog.show(); |
|||
} |
|||
else |
|||
{ |
|||
dialog = this.createDialog({ |
|||
name : dialogName, |
|||
title : dialogLang.title, |
|||
width : 800, |
|||
height : 475, |
|||
mask : settings.dialogShowMask, |
|||
drag : settings.dialogDraggable, |
|||
content : dialogContent, |
|||
lockScreen : settings.dialogLockScreen, |
|||
maskStyle : { |
|||
opacity : settings.dialogMaskOpacity, |
|||
backgroundColor : settings.dialogMaskBgColor |
|||
}, |
|||
buttons : { |
|||
enter : [lang.buttons.enter, function() { |
|||
cm.replaceSelection(selecteds.join(" ")); |
|||
this.hide().lockScreen(false).hideMask(); |
|||
|
|||
return false; |
|||
}], |
|||
cancel : [lang.buttons.cancel, function() { |
|||
this.hide().lockScreen(false).hideMask(); |
|||
|
|||
return false; |
|||
}] |
|||
} |
|||
}); |
|||
} |
|||
|
|||
var category = ["Github emoji", "Twemoji", "Font awesome", "Editor.md logo"]; |
|||
var tab = dialog.find("." + classPrefix + "tab"); |
|||
|
|||
if (tab.html() === "") |
|||
{ |
|||
var head = "<ul class=\"" + classPrefix + "tab-head\">"; |
|||
|
|||
for (var i = 0; i<4; i++) { |
|||
var active = (i === 0) ? " class=\"active\"" : ""; |
|||
head += "<li" + active + "><a href=\"javascript:;\">" + category[i] + "</a></li>"; |
|||
} |
|||
|
|||
head += "</ul>"; |
|||
|
|||
tab.append(head); |
|||
|
|||
var container = "<div class=\"" + classPrefix + "tab-container\">"; |
|||
|
|||
for (var x = 0; x < 4; x++) |
|||
{ |
|||
var display = (x === 0) ? "" : "display:none;"; |
|||
container += "<div class=\"" + classPrefix + "tab-box\" style=\"height: 260px;overflow: hidden;overflow-y: auto;" + display + "\"></div>"; |
|||
} |
|||
|
|||
container += "</div>"; |
|||
|
|||
tab.append(container); |
|||
} |
|||
|
|||
var tabBoxs = tab.find("." + classPrefix + "tab-box"); |
|||
var emojiCategories = ["github-emoji", "twemoji", "font-awesome", logoPrefix]; |
|||
|
|||
var drawTable = function() { |
|||
var cname = emojiCategories[emojiTabIndex]; |
|||
var $data = emojiData[cname]; |
|||
var $tab = tabBoxs.eq(emojiTabIndex); |
|||
|
|||
if ($tab.html() !== "") { |
|||
//console.log("break =>", cname);
|
|||
return ; |
|||
} |
|||
|
|||
var pagination = function(data, type) { |
|||
var rowNumber = (type === "editormd-logo") ? "5" : 20; |
|||
var pageTotal = Math.ceil(data.length / rowNumber); |
|||
var table = "<div class=\"" + classPrefix + "grid-table\">"; |
|||
|
|||
for (var i = 0; i < pageTotal; i++) |
|||
{ |
|||
var row = "<div class=\"" + classPrefix + "grid-table-row\">"; |
|||
|
|||
for (var x = 0; x < rowNumber; x++) |
|||
{ |
|||
var emoji = $.trim(data[(i * rowNumber) + x]); |
|||
|
|||
if (typeof emoji !== "undefined" && emoji !== "") |
|||
{ |
|||
var img = "", icon = ""; |
|||
|
|||
if (type === "github-emoji") |
|||
{ |
|||
var src = (emoji === "+1") ? "plus1" : emoji; |
|||
src = (src === "black_large_square") ? "black_square" : src; |
|||
src = (src === "moon") ? "waxing_gibbous_moon" : src; |
|||
|
|||
src = exports.emoji.path + src + exports.emoji.ext; |
|||
img = "<img src=\"" + src + "\" width=\"24\" class=\"emoji\" title=\":" + emoji + ":\" alt=\":" + emoji + ":\" />"; |
|||
row += "<a href=\"javascript:;\" value=\":" + emoji + ":\" title=\":" + emoji + ":\" class=\"" + classPrefix + "emoji-btn\">" + img + "</a>"; |
|||
} |
|||
else if (type === "twemoji") |
|||
{ |
|||
var twemojiSrc = exports.twemoji.path + emoji + exports.twemoji.ext; |
|||
img = "<img src=\"" + twemojiSrc + "\" width=\"24\" title=\"twemoji-" + emoji + "\" alt=\"twemoji-" + emoji + "\" class=\"emoji twemoji\" />"; |
|||
row += "<a href=\"javascript:;\" value=\":tw-" + emoji + ":\" title=\":tw-" + emoji + ":\" class=\"" + classPrefix + "emoji-btn\">" + img + "</a>"; |
|||
} |
|||
else if (type === "font-awesome") |
|||
{ |
|||
icon = "<i class=\"fa fa-" + emoji + " fa-emoji\" title=\"" + emoji + "\"></i>"; |
|||
row += "<a href=\"javascript:;\" value=\":fa-" + emoji + ":\" title=\":fa-" + emoji + ":\" class=\"" + classPrefix + "emoji-btn\">" + icon + "</a>"; |
|||
} |
|||
else if (type === "editormd-logo") |
|||
{ |
|||
icon = "<i class=\"" + emoji + "\" title=\"Editor.md logo (" + emoji + ")\"></i>"; |
|||
row += "<a href=\"javascript:;\" value=\":" + emoji + ":\" title=\":" + emoji + ":\" style=\"width:20%;\" class=\"" + classPrefix + "emoji-btn\">" + icon + "</a>"; |
|||
} |
|||
} |
|||
else |
|||
{ |
|||
row += "<a href=\"javascript:;\" value=\"\"></a>"; |
|||
} |
|||
} |
|||
|
|||
row += "</div>"; |
|||
|
|||
table += row; |
|||
} |
|||
|
|||
table += "</div>"; |
|||
|
|||
return table; |
|||
}; |
|||
|
|||
if (emojiTabIndex === 0) |
|||
{ |
|||
for (var i = 0, len = $data.length; i < len; i++) |
|||
{ |
|||
var h4Style = (i === 0) ? " style=\"margin: 0 0 10px;\"" : " style=\"margin: 10px 0;\""; |
|||
$tab.append("<h4" + h4Style + ">" + $data[i].category + "</h4>"); |
|||
$tab.append(pagination($data[i].list, cname)); |
|||
} |
|||
} |
|||
else |
|||
{ |
|||
$tab.append(pagination($data, cname)); |
|||
} |
|||
|
|||
$tab.find("." + classPrefix + "emoji-btn").bind(exports.mouseOrTouch("click", "touchend"), function() { |
|||
$(this).toggleClass("selected"); |
|||
|
|||
if ($(this).hasClass("selected")) |
|||
{ |
|||
selecteds.push($(this).attr("value")); |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
if (emojiData.length < 1) |
|||
{ |
|||
if (typeof dialog.loading === "function") { |
|||
dialog.loading(true); |
|||
} |
|||
|
|||
$.getJSON(path + "emoji.json?temp=" + Math.random(), function(json) { |
|||
|
|||
if (typeof dialog.loading === "function") { |
|||
dialog.loading(false); |
|||
} |
|||
|
|||
emojiData = json; |
|||
emojiData[logoPrefix] = logos; |
|||
drawTable(); |
|||
}); |
|||
} |
|||
else |
|||
{ |
|||
drawTable(); |
|||
} |
|||
|
|||
tab.find("li").bind(exports.mouseOrTouch("click", "touchend"), function() { |
|||
var $this = $(this); |
|||
emojiTabIndex = $this.index(); |
|||
|
|||
$this.addClass("active").siblings().removeClass("active"); |
|||
tabBoxs.eq(emojiTabIndex).show().siblings().hide(); |
|||
drawTable(); |
|||
}); |
|||
}; |
|||
|
|||
}; |
|||
|
|||
// CommonJS/Node.js
|
|||
if (typeof require === "function" && typeof exports === "object" && typeof module === "object") |
|||
{ |
|||
module.exports = factory; |
|||
} |
|||
else if (typeof define === "function") // AMD/CMD/Sea.js
|
|||
{ |
|||
if (define.amd) { // for Require.js
|
|||
|
|||
define(["editormd"], function(editormd) { |
|||
factory(editormd); |
|||
}); |
|||
|
|||
} else { // for Sea.js
|
|||
define(function(require) { |
|||
var editormd = require("./../../editormd"); |
|||
factory(editormd); |
|||
}); |
|||
} |
|||
} |
|||
else |
|||
{ |
|||
factory(window.editormd); |
|||
} |
|||
|
|||
})(); |
|||
/*! |
|||
* Emoji dialog plugin for Editor.md |
|||
* |
|||
* @file emoji-dialog.js |
|||
* @author pandao |
|||
* @version 1.2.0 |
|||
* @updateTime 2015-03-08 |
|||
* {@link https://github.com/pandao/editor.md}
|
|||
* @license MIT |
|||
*/ |
|||
|
|||
(function() { |
|||
|
|||
var factory = function (exports) { |
|||
|
|||
var $ = jQuery; |
|||
var pluginName = "emoji-dialog"; |
|||
var emojiTabIndex = 0; |
|||
var emojiData = []; |
|||
var selecteds = []; |
|||
|
|||
var logoPrefix = "editormd-logo"; |
|||
var logos = [ |
|||
logoPrefix, |
|||
logoPrefix + "-1x", |
|||
logoPrefix + "-2x", |
|||
logoPrefix + "-3x", |
|||
logoPrefix + "-4x", |
|||
logoPrefix + "-5x", |
|||
logoPrefix + "-6x", |
|||
logoPrefix + "-7x", |
|||
logoPrefix + "-8x" |
|||
]; |
|||
|
|||
var langs = { |
|||
"zh-cn" : { |
|||
toolbar : { |
|||
emoji : "Emoji 表情" |
|||
}, |
|||
dialog : { |
|||
emoji : { |
|||
title : "Emoji 表情" |
|||
} |
|||
} |
|||
}, |
|||
"zh-tw" : { |
|||
toolbar : { |
|||
emoji : "Emoji 表情" |
|||
}, |
|||
dialog : { |
|||
emoji : { |
|||
title : "Emoji 表情" |
|||
} |
|||
} |
|||
}, |
|||
"en" : { |
|||
toolbar : { |
|||
emoji : "Emoji" |
|||
}, |
|||
dialog : { |
|||
emoji : { |
|||
title : "Emoji" |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
|
|||
exports.fn.emojiDialog = function() { |
|||
var _this = this; |
|||
var cm = this.cm; |
|||
var settings = _this.settings; |
|||
|
|||
if (!settings.emoji) { |
|||
alert("settings.emoji == false"); |
|||
|
|||
return false; |
|||
} |
|||
|
|||
var path = settings.pluginPath + pluginName + "/"; |
|||
var editor = this.editor; |
|||
var cursor = cm.getCursor(); |
|||
var selection = cm.getSelection(); |
|||
var classPrefix = this.classPrefix; |
|||
|
|||
$.extend(true, this.lang, langs[this.lang.name]); |
|||
|
|||
this.setToolbar(); |
|||
|
|||
var lang = this.lang; |
|||
var dialogName = classPrefix + pluginName, dialog; |
|||
var dialogLang = lang.dialog.emoji; |
|||
|
|||
var categoryNames = { |
|||
"github-emoji" : "Github emoji", |
|||
"twemoji" : "Twemoji", |
|||
"font-awesome" : "Font Awesome", |
|||
"editormd-logo" : "Editor.md logo" |
|||
}; |
|||
|
|||
var dialogContent = [ |
|||
"<div class=\"" + classPrefix + "emoji-dialog-box\" style=\"width: 760px;height: 334px;margin-bottom: 8px;overflow: hidden;\">", |
|||
"<div class=\"" + classPrefix + "tab\"></div>", |
|||
"</div>", |
|||
].join("\n"); |
|||
|
|||
cm.focus(); |
|||
|
|||
if (editor.find("." + dialogName).length > 0) { |
|||
dialog = editor.find("." + dialogName); |
|||
|
|||
selecteds = []; |
|||
dialog.find("a").removeClass("selected"); |
|||
|
|||
this.dialogShowMask(dialog); |
|||
this.dialogLockScreen(); |
|||
dialog.show(); |
|||
} else { |
|||
dialog = this.createDialog({ |
|||
name : dialogName, |
|||
title : dialogLang.title, |
|||
width : 800, |
|||
height : 480, |
|||
mask : settings.dialogShowMask, |
|||
drag : settings.dialogDraggable, |
|||
cached : true, |
|||
content : dialogContent, |
|||
lockScreen : settings.dialogLockScreen, |
|||
maskStyle : { |
|||
opacity : settings.dialogMaskOpacity, |
|||
backgroundColor : settings.dialogMaskBgColor |
|||
}, |
|||
buttons : { |
|||
enter : [lang.buttons.enter, function() { |
|||
cm.replaceSelection(selecteds.join(" ")); |
|||
this.hide().lockScreen(false).hideMask(); |
|||
|
|||
return false; |
|||
}], |
|||
cancel : [lang.buttons.cancel, function() { |
|||
this.hide().lockScreen(false).hideMask(); |
|||
|
|||
return false; |
|||
}] |
|||
} |
|||
}); |
|||
} |
|||
|
|||
var tab = dialog.find("." + classPrefix + "tab"); |
|||
var tabTitles = []; |
|||
var emojiCategories = []; |
|||
|
|||
if (settings.emojiCategories) { |
|||
$.each(settings.emojiCategories, function (key, value) { |
|||
emojiCategories.push(value); |
|||
|
|||
tabTitles.push(categoryNames[value]); |
|||
}); |
|||
} |
|||
|
|||
if (tab.html() === "") { |
|||
var head = "<ul class=\"" + classPrefix + "tab-head\">"; |
|||
var tabTotal = tabTitles.length; |
|||
|
|||
for (var i = 0; i < tabTotal; i++) { |
|||
var active = (i === 0) ? " class=\"active\"" : ""; |
|||
head += "<li" + active + "><a href=\"javascript:;\">" + tabTitles[i] + "</a></li>"; |
|||
} |
|||
|
|||
head += "</ul>"; |
|||
|
|||
tab.append(head); |
|||
|
|||
var container = "<div class=\"" + classPrefix + "tab-container\">"; |
|||
|
|||
for (var x = 0; x < tabTotal; x++) { |
|||
var display = (x === 0) ? "" : "display:none;"; |
|||
|
|||
container += "<div class=\"" + classPrefix + "tab-box\" style=\"height: 320px;overflow: hidden;overflow-y: auto;" + display + "\"></div>"; |
|||
} |
|||
|
|||
container += "</div>"; |
|||
|
|||
tab.append(container); |
|||
} |
|||
|
|||
var tabBoxs = tab.find("." + classPrefix + "tab-box"); |
|||
|
|||
var drawTable = function() { |
|||
var cname = emojiCategories[emojiTabIndex]; |
|||
var $data = emojiData[cname]; |
|||
var $tab = tabBoxs.eq(emojiTabIndex); |
|||
|
|||
if ($tab.html() !== "") { |
|||
return ; |
|||
} |
|||
|
|||
var pagination = function(data, type) { |
|||
var rowNumber = (type === "editormd-logo") ? "5" : 20; |
|||
var pageTotal = Math.ceil(data.length / rowNumber); |
|||
var table = "<div class=\"" + classPrefix + "grid-table\">"; |
|||
|
|||
for (var i = 0; i < pageTotal; i++) { |
|||
var row = "<div class=\"" + classPrefix + "grid-table-row\">"; |
|||
|
|||
for (var x = 0; x < rowNumber; x++) { |
|||
var emoji = $.trim(data[(i * rowNumber) + x]); |
|||
|
|||
if (typeof emoji !== "undefined" && emoji !== "") { |
|||
var img = "", icon = ""; |
|||
|
|||
if (type === "github-emoji") { |
|||
var src = (emoji === "+1") ? "plus1" : emoji; |
|||
src = (src === "black_large_square") ? "black_square" : src; |
|||
src = (src === "moon") ? "waxing_gibbous_moon" : src; |
|||
|
|||
src = exports.emoji.path + src + exports.emoji.ext; |
|||
img = "<img src=\"" + src + "\" width=\"24\" class=\"emoji\" title=\":" + emoji + ":\" alt=\":" + emoji + ":\" />"; |
|||
row += "<a href=\"javascript:;\" value=\":" + emoji + ":\" title=\":" + emoji + ":\" class=\"" + classPrefix + "emoji-btn\">" + img + "</a>"; |
|||
} else if (type === "twemoji") { |
|||
var twemojiSrc = exports.twemoji.path + emoji + exports.twemoji.ext; |
|||
img = "<img src=\"" + twemojiSrc + "\" width=\"24\" title=\"twemoji-" + emoji + "\" alt=\"twemoji-" + emoji + "\" class=\"emoji twemoji\" />"; |
|||
row += "<a href=\"javascript:;\" value=\":tw-" + emoji + ":\" title=\":tw-" + emoji + ":\" class=\"" + classPrefix + "emoji-btn\">" + img + "</a>"; |
|||
} else if (type === "font-awesome") { |
|||
icon = "<i class=\"fa fa-" + emoji + " fa-emoji\" title=\"" + emoji + "\"></i>"; |
|||
row += "<a href=\"javascript:;\" value=\":fa-" + emoji + ":\" title=\":fa-" + emoji + ":\" class=\"" + classPrefix + "emoji-btn\">" + icon + "</a>"; |
|||
} else if (type === "editormd-logo") { |
|||
icon = "<i class=\"" + emoji + "\" title=\"Editor.md logo (" + emoji + ")\"></i>"; |
|||
row += "<a href=\"javascript:;\" value=\":" + emoji + ":\" title=\":" + emoji + ":\" style=\"width:20%;\" class=\"" + classPrefix + "emoji-btn\">" + icon + "</a>"; |
|||
} |
|||
} else { |
|||
row += "<a href=\"javascript:;\" value=\"\"></a>"; |
|||
} |
|||
} |
|||
|
|||
row += "</div>"; |
|||
table += row; |
|||
} |
|||
|
|||
table += "</div>"; |
|||
|
|||
return table; |
|||
}; |
|||
|
|||
if (cname === "github-emoji") { |
|||
for (var i = 0, len = $data.length; i < len; i++) { |
|||
var h4Style = (i === 0) ? " style=\"margin: 0 0 10px;\"" : " style=\"margin: 10px 0;\""; |
|||
$tab.append("<h4" + h4Style + ">" + $data[i].category + "</h4>"); |
|||
$tab.append(pagination($data[i].list, cname)); |
|||
} |
|||
} else { |
|||
$tab.append(pagination($data, cname)); |
|||
} |
|||
|
|||
$tab.find("." + classPrefix + "emoji-btn").bind("click", function() { |
|||
$(this).toggleClass("selected"); |
|||
|
|||
if ($(this).hasClass("selected")) { |
|||
selecteds.push($(this).attr("value")); |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
if (emojiData.length < 1) { |
|||
if (typeof dialog.loading === "function") { |
|||
dialog.loading(true); |
|||
} |
|||
|
|||
$.getJSON(path + "emoji.json?temp=" + Math.random(), function(json) { |
|||
if (typeof dialog.loading === "function") { |
|||
dialog.loading(false); |
|||
} |
|||
|
|||
emojiData = json; |
|||
emojiData[logoPrefix] = logos; |
|||
drawTable(); |
|||
}); |
|||
} else { |
|||
drawTable(); |
|||
} |
|||
|
|||
tab.find("li").bind("click", function() { |
|||
var $this = $(this); |
|||
emojiTabIndex = $this.index(); |
|||
|
|||
$this.addClass("active").siblings().removeClass("active"); |
|||
tabBoxs.eq(emojiTabIndex).show().siblings().hide(); |
|||
drawTable(); |
|||
}); |
|||
}; |
|||
}; |
|||
|
|||
// CommonJS/Node.js
|
|||
if (typeof require === "function" && typeof exports === "object" && typeof module === "object") { |
|||
module.exports = factory; |
|||
} else if (typeof define === "function") { // AMD/CMD/Sea.js
|
|||
if (define.amd) { // for Require.js
|
|||
|
|||
define(["editormd"], function(editormd) { |
|||
factory(editormd); |
|||
}); |
|||
|
|||
} else { // for Sea.js
|
|||
define(function(require) { |
|||
var editormd = require("./../../editormd"); |
|||
factory(editormd); |
|||
}); |
|||
} |
|||
} else { |
|||
factory(window.editormd); |
|||
} |
|||
|
|||
})(); |
|||
|
|||
@ -1,184 +1,184 @@ |
|||
@charset "UTF-8"; |
|||
|
|||
#{$prefix}dialog { |
|||
color: $color; |
|||
position: fixed; |
|||
z-index: 99999; |
|||
display: none; |
|||
@include border-radius(3px); |
|||
@include box-shadow(0 0 10px rgba(0, 0, 0, 0.3)); |
|||
//@include user-select(none); |
|||
background: #fff; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
#{$prefix}dialog-container { |
|||
position: relative; |
|||
padding: 20px; |
|||
line-height: 1.4; |
|||
|
|||
h1 { |
|||
font-size: 24px; |
|||
margin-bottom: 10px; |
|||
|
|||
.fa { |
|||
color: #2C7EEA; |
|||
padding-right: 5px; |
|||
} |
|||
|
|||
small { |
|||
padding-left: 5px; |
|||
font-weight: normal; |
|||
font-size: 12px; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
select { |
|||
color: #999; |
|||
padding: 3px 8px; |
|||
border: 1px solid $borderColor; |
|||
} |
|||
} |
|||
|
|||
#{$prefix}dialog-close { |
|||
position: absolute; |
|||
top: 12px; |
|||
right: 15px; |
|||
font-size: 18px; |
|||
color: #ccc; |
|||
@include transition(color 300ms ease-out); |
|||
|
|||
&:hover { |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
#{$prefix}dialog-header { |
|||
padding: 11px 20px; |
|||
border-bottom: 1px solid #eee; |
|||
@include transition(background 300ms ease-out); |
|||
|
|||
&:hover { |
|||
background: #f6f6f6; |
|||
} |
|||
} |
|||
|
|||
#{$prefix}dialog-title { |
|||
font-size: 14px; |
|||
} |
|||
|
|||
#{$prefix}dialog-footer { |
|||
padding: 10px 0 0 0; |
|||
text-align: right; |
|||
} |
|||
|
|||
#{$prefix}dialog-info { |
|||
width: 420px; |
|||
|
|||
h1 { |
|||
font-weight: normal; |
|||
} |
|||
|
|||
#{$prefix}dialog-container { |
|||
padding: 20px 25px 25px; |
|||
} |
|||
|
|||
#{$prefix}dialog-close { |
|||
top: 10px; |
|||
right: 10px; |
|||
} |
|||
|
|||
p > a, .hover-link:hover { |
|||
color: #2196F3; |
|||
} |
|||
|
|||
.hover-link { |
|||
color: #666; |
|||
} |
|||
|
|||
a { |
|||
.fa-external-link { |
|||
display: none; |
|||
} |
|||
|
|||
&:hover { |
|||
color: #2196F3; |
|||
|
|||
.fa-external-link { |
|||
display: inline-block; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
#{$prefix}mask, |
|||
#{$prefix}container-mask, |
|||
#{$prefix}dialog-mask { |
|||
display: none; |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
} |
|||
|
|||
#{$prefix}mask, |
|||
#{$prefix}dialog-mask-bg { |
|||
background: #fff; |
|||
opacity: 0.5; |
|||
filter: alpha(opacity=50); |
|||
} |
|||
|
|||
#{$prefix}mask { |
|||
position: fixed; |
|||
background: #000; |
|||
@include opacity(0.2); |
|||
z-index: 99998; |
|||
} |
|||
|
|||
#{$prefix}container-mask, |
|||
#{$prefix}dialog-mask-con { |
|||
background: url(../images/loading.gif) no-repeat center center; |
|||
@include background-size(32px 32px); |
|||
} |
|||
|
|||
#{$prefix}container-mask { |
|||
z-index: 20; |
|||
display: block; |
|||
background-color: #fff; |
|||
} |
|||
|
|||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { |
|||
#{$prefix}container-mask, |
|||
#{$prefix}dialog-mask-con { |
|||
background-image: url(../images/loading@2x.gif); |
|||
} |
|||
} |
|||
|
|||
@media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-device-pixel-ratio: 3) { |
|||
#{$prefix}container-mask, |
|||
#{$prefix}dialog-mask-con { |
|||
background-image: url(../images/loading@3x.gif); |
|||
} |
|||
} |
|||
|
|||
#{$prefix}code-block-dialog, |
|||
#{$prefix}preformatted-text-dialog { |
|||
textarea { |
|||
width: 100%; |
|||
height: 400px; |
|||
margin-bottom: 6px; |
|||
overflow: auto; |
|||
border: 1px solid #eee; |
|||
background: #fff; |
|||
padding: 15px; |
|||
resize: none; |
|||
} |
|||
} |
|||
|
|||
#{$prefix}code-toolbar { |
|||
color: #999; |
|||
font-size: 14px; |
|||
margin: -5px 0 10px; |
|||
} |
|||
@charset "UTF-8"; |
|||
|
|||
#{$prefix}dialog { |
|||
color: $color; |
|||
position: fixed; |
|||
z-index: 99999; |
|||
display: none; |
|||
@include border-radius(3px); |
|||
@include box-shadow(0 0 10px rgba(0, 0, 0, 0.3)); |
|||
//@include user-select(none); |
|||
background: #fff; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
#{$prefix}dialog-container { |
|||
position: relative; |
|||
padding: 20px; |
|||
line-height: 1.4; |
|||
|
|||
h1 { |
|||
font-size: 24px; |
|||
margin-bottom: 10px; |
|||
|
|||
.fa { |
|||
color: #2C7EEA; |
|||
padding-right: 5px; |
|||
} |
|||
|
|||
small { |
|||
padding-left: 5px; |
|||
font-weight: normal; |
|||
font-size: 12px; |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
select { |
|||
color: #999; |
|||
padding: 3px 8px; |
|||
border: 1px solid $borderColor; |
|||
} |
|||
} |
|||
|
|||
#{$prefix}dialog-close { |
|||
position: absolute; |
|||
top: 12px; |
|||
right: 15px; |
|||
font-size: 18px; |
|||
color: #ccc; |
|||
@include transition(color 300ms ease-out); |
|||
|
|||
&:hover { |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
#{$prefix}dialog-header { |
|||
padding: 11px 20px; |
|||
border-bottom: 1px solid #eee; |
|||
@include transition(background 300ms ease-out); |
|||
|
|||
&:hover { |
|||
background: #f6f6f6; |
|||
} |
|||
} |
|||
|
|||
#{$prefix}dialog-title { |
|||
font-size: 14px; |
|||
} |
|||
|
|||
#{$prefix}dialog-footer { |
|||
padding: 10px 0 0 0; |
|||
text-align: right; |
|||
} |
|||
|
|||
#{$prefix}dialog-info { |
|||
width: 420px; |
|||
|
|||
h1 { |
|||
font-weight: normal; |
|||
} |
|||
|
|||
#{$prefix}dialog-container { |
|||
padding: 20px 25px 25px; |
|||
} |
|||
|
|||
#{$prefix}dialog-close { |
|||
top: 10px; |
|||
right: 10px; |
|||
} |
|||
|
|||
p > a, .hover-link:hover { |
|||
color: #2196F3; |
|||
} |
|||
|
|||
.hover-link { |
|||
color: #666; |
|||
} |
|||
|
|||
a { |
|||
.fa-external-link { |
|||
display: none; |
|||
} |
|||
|
|||
&:hover { |
|||
color: #2196F3; |
|||
|
|||
.fa-external-link { |
|||
display: inline-block; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
#{$prefix}mask, |
|||
#{$prefix}container-mask, |
|||
#{$prefix}dialog-mask { |
|||
display: none; |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
} |
|||
|
|||
#{$prefix}mask, |
|||
#{$prefix}dialog-mask-bg { |
|||
background: #fff; |
|||
opacity: 0.5; |
|||
filter: alpha(opacity=50); |
|||
} |
|||
|
|||
#{$prefix}mask { |
|||
position: fixed; |
|||
background: #000; |
|||
@include opacity(0.2); |
|||
z-index: 9998; |
|||
} |
|||
|
|||
#{$prefix}container-mask, |
|||
#{$prefix}dialog-mask-con { |
|||
background: url(../images/loading.gif) no-repeat center center; |
|||
@include background-size(32px 32px); |
|||
} |
|||
|
|||
#{$prefix}container-mask { |
|||
z-index: 20; |
|||
display: block; |
|||
background-color: #fff; |
|||
} |
|||
|
|||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { |
|||
#{$prefix}container-mask, |
|||
#{$prefix}dialog-mask-con { |
|||
background-image: url(../images/loading@2x.gif); |
|||
} |
|||
} |
|||
|
|||
@media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-device-pixel-ratio: 3) { |
|||
#{$prefix}container-mask, |
|||
#{$prefix}dialog-mask-con { |
|||
background-image: url(../images/loading@3x.gif); |
|||
} |
|||
} |
|||
|
|||
#{$prefix}code-block-dialog, |
|||
#{$prefix}preformatted-text-dialog { |
|||
textarea { |
|||
width: 100%; |
|||
height: 400px; |
|||
margin-bottom: 6px; |
|||
overflow: auto; |
|||
border: 1px solid #eee; |
|||
background: #fff; |
|||
padding: 15px; |
|||
resize: none; |
|||
} |
|||
} |
|||
|
|||
#{$prefix}code-toolbar { |
|||
color: #999; |
|||
font-size: 14px; |
|||
margin: -5px 0 10px; |
|||
} |
|||
|
|||
@ -1,322 +1,348 @@ |
|||
@charset "UTF-8"; |
|||
|
|||
@import "lib/variables"; |
|||
@import "lib/prefixes"; |
|||
@import "font-awesome"; |
|||
|
|||
@import "editormd.logo"; |
|||
|
|||
// github-markdown.css |
|||
@import "github-markdown"; |
|||
|
|||
#{$prefix}preview-container, #{$prefix}html-preview { |
|||
text-align: left; |
|||
font-size: 14px; |
|||
line-height: 1.6; |
|||
padding: 20px; |
|||
overflow: auto; |
|||
width: 100%; |
|||
background-color: #fff; |
|||
|
|||
blockquote { |
|||
color: $color; |
|||
border-left: 4px solid $borderColor; |
|||
padding-left: 20px; |
|||
margin-left: 0; |
|||
font-size: 14px; |
|||
font-style: italic; |
|||
} |
|||
|
|||
p code { |
|||
margin-left: 5px; |
|||
margin-right: 4px; |
|||
} |
|||
|
|||
abbr { |
|||
background: #ffffdd; |
|||
} |
|||
|
|||
hr { |
|||
height: 1px; |
|||
border: none; |
|||
border-top: 1px solid $borderColor; |
|||
background: none; |
|||
} |
|||
|
|||
code { |
|||
border: 1px solid $borderColor; |
|||
background: #f6f6f6; |
|||
padding: 3px; |
|||
border-radius: 3px; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
pre { |
|||
border: 1px solid $borderColor; |
|||
background: #f6f6f6; |
|||
padding: 10px; |
|||
@include border-radius(3px); |
|||
|
|||
code { |
|||
padding: 0; |
|||
} |
|||
} |
|||
|
|||
pre, code, kbd { |
|||
font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; |
|||
} |
|||
|
|||
table thead tr { |
|||
background-color: #F8F8F8; |
|||
} |
|||
|
|||
.markdown-toc { |
|||
} |
|||
|
|||
.markdown-toc-list { |
|||
} |
|||
|
|||
p#{$prefix}tex { |
|||
text-align: center; |
|||
} |
|||
|
|||
span#{$prefix}tex { |
|||
margin: 0 5px; |
|||
} |
|||
|
|||
.emoji { |
|||
width: 24px; |
|||
height: 24px; |
|||
} |
|||
|
|||
.katex { |
|||
font-size: 1.4em; |
|||
} |
|||
|
|||
.sequence-diagram, .flowchart { |
|||
margin: 0 auto; |
|||
text-align: center; |
|||
|
|||
svg { |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
text { |
|||
font-size : 15px !important; |
|||
font-family: "YaHei Consolas Hybrid", Consolas, "Microsoft YaHei", "Malgun Gothic", "Segoe UI", Helvetica, Arial !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
//Pretty printing styles. Used with prettify.js. |
|||
|
|||
@import "prettify"; |
|||
|
|||
#{$prefix}preview-container, #{$prefix}html-preview { |
|||
pre.prettyprint { |
|||
padding: 10px; |
|||
border: 1px solid $borderColor; |
|||
white-space: pre-wrap; |
|||
word-wrap: break-word; |
|||
} |
|||
|
|||
ol.linenums { |
|||
color: #999; |
|||
padding-left: 2.5em; |
|||
|
|||
li { |
|||
list-style-type: decimal; |
|||
|
|||
code { |
|||
border: none; |
|||
background:none; |
|||
padding: 0; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
#{$prefix}preview-container, #{$prefix}html-preview { |
|||
|
|||
#{$prefix}toc-menu { |
|||
margin: 8px 0 12px 0; |
|||
display: inline-block; |
|||
|
|||
> .markdown-toc { |
|||
position: relative; |
|||
@include border-radius(4px); |
|||
border: 1px solid #ddd; |
|||
display: inline-block; |
|||
font-size: 1em; |
|||
|
|||
> ul { |
|||
width : 160%; |
|||
min-width: 180px; |
|||
position: absolute; |
|||
left: -1px; |
|||
top: -2px; |
|||
z-index: 100; |
|||
padding: 0 10px 10px; |
|||
display: none; |
|||
background: #fff; |
|||
border: 1px solid #ddd; |
|||
@include border-radius(4px); |
|||
@include box-shadow(0 3px 5px rgba(0, 0, 0, 0.2)); |
|||
|
|||
> li ul { |
|||
width: 100%; |
|||
min-width: 180px; |
|||
border: 1px solid #ddd; |
|||
display: none; |
|||
background: #fff; |
|||
@include border-radius(4px); |
|||
} |
|||
|
|||
> li a { |
|||
color: #666; |
|||
padding: 6px 10px; |
|||
display: block; |
|||
@include transition(background-color 500ms ease-out); |
|||
|
|||
&:hover { |
|||
background-color: #f6f6f6; |
|||
} |
|||
} |
|||
} |
|||
|
|||
li { |
|||
position: relative; |
|||
|
|||
> ul { |
|||
position: absolute; |
|||
top: 32px; |
|||
left: 10%; |
|||
display: none; |
|||
@include box-shadow(0 3px 5px rgba(0, 0, 0, 0.2)); |
|||
|
|||
&:before, &:after { |
|||
pointer-events: pointer-events; |
|||
position: absolute; |
|||
left: 15px; |
|||
top: -6px; |
|||
display: block; |
|||
content: ""; |
|||
width: 0; |
|||
height: 0; |
|||
border: 6px solid transparent; |
|||
border-width: 0 6px 6px; |
|||
z-index: 10; |
|||
} |
|||
|
|||
&:before { |
|||
border-bottom-color: #ccc; |
|||
} |
|||
|
|||
&:after { |
|||
border-bottom-color: #ffffff; |
|||
top: -5px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
ul { |
|||
list-style: none; |
|||
} |
|||
|
|||
a { |
|||
text-decoration: none; |
|||
} |
|||
|
|||
h1 { |
|||
font-size: 16px; |
|||
padding: 5px 0 10px 10px; |
|||
line-height: 1; |
|||
border-bottom: 1px solid #eee; |
|||
|
|||
.fa { |
|||
padding-left: 10px; |
|||
} |
|||
} |
|||
|
|||
.toc-menu-btn { |
|||
color: #666; |
|||
min-width: 180px; |
|||
padding: 5px 10px; |
|||
border-radius: 4px; |
|||
display: inline-block; |
|||
@include transition(background-color 500ms ease-out); |
|||
|
|||
&:hover { |
|||
background-color: #f6f6f6; |
|||
} |
|||
|
|||
.fa { |
|||
float: right; |
|||
padding: 3px 0 0 10px; |
|||
font-size: 1.3em; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.markdown-body { |
|||
#{$prefix}toc-menu { |
|||
ul { |
|||
padding-left: 0; |
|||
} |
|||
} |
|||
|
|||
.highlight pre, pre { |
|||
line-height: 1.6; |
|||
} |
|||
} |
|||
|
|||
hr.editormd-page-break { |
|||
border: 1px dotted #ccc; |
|||
font-size: 0; |
|||
height: 2px; |
|||
} |
|||
|
|||
@media only print { |
|||
hr.editormd-page-break { |
|||
background: none; |
|||
border: none; |
|||
height: 0; |
|||
} |
|||
} |
|||
|
|||
#{$prefix}html-preview { |
|||
textarea { |
|||
display : none; |
|||
} |
|||
|
|||
hr.editormd-page-break { |
|||
background: none; |
|||
border: none; |
|||
height: 0; |
|||
} |
|||
} |
|||
|
|||
#{$prefix}preview-close-btn { |
|||
color: #fff; |
|||
padding: 4px 6px; |
|||
font-size: 18px; |
|||
@include border-radius(500px); |
|||
display: none; |
|||
background-color: #ccc; |
|||
position: absolute; |
|||
top: 25px; |
|||
right: 35px; |
|||
z-index: 19; |
|||
@include transition(background-color 300ms ease-out); |
|||
|
|||
&:hover { |
|||
background-color: #999; |
|||
} |
|||
} |
|||
|
|||
.editormd-preview-active { |
|||
width: 100%; |
|||
padding: 40px; |
|||
} |
|||
@charset "UTF-8"; |
|||
|
|||
@import "lib/variables"; |
|||
@import "lib/prefixes"; |
|||
@import "font-awesome"; |
|||
|
|||
@import "editormd.logo"; |
|||
|
|||
// github-markdown.css |
|||
@import "github-markdown"; |
|||
|
|||
#{$prefix}preview-container, #{$prefix}html-preview { |
|||
text-align: left; |
|||
font-size: 14px; |
|||
line-height: 1.6; |
|||
padding: 20px; |
|||
overflow: auto; |
|||
width: 100%; |
|||
background-color: #fff; |
|||
|
|||
blockquote { |
|||
color: $color; |
|||
border-left: 4px solid $borderColor; |
|||
padding-left: 20px; |
|||
margin-left: 0; |
|||
font-size: 14px; |
|||
font-style: italic; |
|||
} |
|||
|
|||
p code { |
|||
margin-left: 5px; |
|||
margin-right: 4px; |
|||
} |
|||
|
|||
abbr { |
|||
background: #ffffdd; |
|||
} |
|||
|
|||
hr { |
|||
height: 1px; |
|||
border: none; |
|||
border-top: 1px solid $borderColor; |
|||
background: none; |
|||
} |
|||
|
|||
code { |
|||
border: 1px solid $borderColor; |
|||
background: #f6f6f6; |
|||
padding: 3px; |
|||
border-radius: 3px; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
pre { |
|||
border: 1px solid $borderColor; |
|||
background: #f6f6f6; |
|||
padding: 10px; |
|||
@include border-radius(3px); |
|||
|
|||
code { |
|||
padding: 0; |
|||
} |
|||
} |
|||
|
|||
pre, code, kbd { |
|||
font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace; |
|||
} |
|||
|
|||
table thead tr { |
|||
background-color: #F8F8F8; |
|||
} |
|||
|
|||
.markdown-toc { |
|||
} |
|||
|
|||
.markdown-toc-list { |
|||
} |
|||
|
|||
p#{$prefix}tex { |
|||
text-align: center; |
|||
} |
|||
|
|||
span#{$prefix}tex { |
|||
margin: 0 5px; |
|||
} |
|||
|
|||
.emoji { |
|||
width: 24px; |
|||
height: 24px; |
|||
} |
|||
|
|||
.katex { |
|||
font-size: 1.4em; |
|||
} |
|||
|
|||
.sequence-diagram, .flowchart { |
|||
margin: 0 auto; |
|||
text-align: center; |
|||
|
|||
svg { |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
text { |
|||
font-size : 15px !important; |
|||
font-family: "YaHei Consolas Hybrid", Consolas, "Microsoft YaHei", "Malgun Gothic", "Segoe UI", Helvetica, Arial !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
//Pretty printing styles. Used with prettify.js. |
|||
|
|||
@import "prettify"; |
|||
|
|||
#{$prefix}preview-container, #{$prefix}html-preview { |
|||
pre { |
|||
&.prettyprint { |
|||
padding: 10px; |
|||
border: 1px solid $borderColor; |
|||
white-space: pre-wrap; |
|||
word-wrap: break-word; |
|||
background: #fff; |
|||
@include transition(border-color .3s ease, background-color .3s ease); |
|||
|
|||
li { |
|||
border-left: 1px solid #ddd; |
|||
padding-left: 0.8em; |
|||
@include transition(background-color .3s ease); |
|||
|
|||
&:hover { |
|||
background-color: #fafafa; |
|||
} |
|||
} |
|||
|
|||
li + li { |
|||
margin-top: 0; |
|||
} |
|||
|
|||
&:hover { |
|||
border: 1px solid darken($borderColor, 3%); |
|||
} |
|||
|
|||
ol.linenums { |
|||
color: #999; |
|||
padding-left: 2.7em; |
|||
|
|||
li { |
|||
list-style-type: decimal; |
|||
|
|||
code { |
|||
border: none; |
|||
background:none; |
|||
padding: 0; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
#{$prefix}preview-container, #{$prefix}html-preview { |
|||
|
|||
#{$prefix}toc-menu { |
|||
margin: 8px 0 12px 0; |
|||
display: inline-block; |
|||
|
|||
> .markdown-toc { |
|||
position: relative; |
|||
@include border-radius(4px); |
|||
border: 1px solid #ddd; |
|||
display: inline-block; |
|||
font-size: 1em; |
|||
|
|||
> ul { |
|||
width : 160%; |
|||
min-width: 180px; |
|||
position: absolute; |
|||
left: -1px; |
|||
top: -2px; |
|||
z-index: 100; |
|||
padding: 0 10px 10px; |
|||
display: none; |
|||
background: #fff; |
|||
border: 1px solid #ddd; |
|||
@include border-radius(4px); |
|||
@include box-shadow(0 3px 5px rgba(0, 0, 0, 0.2)); |
|||
|
|||
> li ul { |
|||
width: 100%; |
|||
min-width: 180px; |
|||
border: 1px solid #ddd; |
|||
display: none; |
|||
background: #fff; |
|||
@include border-radius(4px); |
|||
} |
|||
|
|||
> li a { |
|||
color: #666; |
|||
padding: 6px 10px; |
|||
display: block; |
|||
@include transition(background-color 500ms ease-out); |
|||
|
|||
&:hover { |
|||
background-color: #f6f6f6; |
|||
} |
|||
} |
|||
} |
|||
|
|||
li { |
|||
position: relative; |
|||
|
|||
> ul { |
|||
position: absolute; |
|||
top: 32px; |
|||
left: 10%; |
|||
display: none; |
|||
@include box-shadow(0 3px 5px rgba(0, 0, 0, 0.2)); |
|||
|
|||
&:before, &:after { |
|||
pointer-events: pointer-events; |
|||
position: absolute; |
|||
left: 15px; |
|||
top: -6px; |
|||
display: block; |
|||
content: ""; |
|||
width: 0; |
|||
height: 0; |
|||
border: 6px solid transparent; |
|||
border-width: 0 6px 6px; |
|||
z-index: 10; |
|||
} |
|||
|
|||
&:before { |
|||
border-bottom-color: #ccc; |
|||
} |
|||
|
|||
&:after { |
|||
border-bottom-color: #ffffff; |
|||
top: -5px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
ul { |
|||
list-style: none; |
|||
} |
|||
|
|||
a { |
|||
text-decoration: none; |
|||
} |
|||
|
|||
h1 { |
|||
font-size: 16px; |
|||
padding: 5px 0 10px 10px; |
|||
line-height: 1; |
|||
border-bottom: 1px solid #eee; |
|||
|
|||
.fa { |
|||
padding-left: 10px; |
|||
} |
|||
} |
|||
|
|||
.toc-menu-btn { |
|||
color: #666; |
|||
min-width: 180px; |
|||
padding: 5px 10px; |
|||
border-radius: 4px; |
|||
display: inline-block; |
|||
@include transition(background-color 500ms ease-out); |
|||
|
|||
&:hover { |
|||
background-color: #f6f6f6; |
|||
} |
|||
|
|||
.fa { |
|||
float: right; |
|||
padding: 3px 0 0 10px; |
|||
font-size: 1.3em; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.markdown-body { |
|||
#{$prefix}toc-menu { |
|||
ul { |
|||
padding-left: 0; |
|||
} |
|||
} |
|||
|
|||
img { |
|||
background: none; |
|||
} |
|||
|
|||
.highlight pre, pre { |
|||
line-height: 1.6; |
|||
} |
|||
} |
|||
|
|||
hr.editormd-page-break { |
|||
border: 1px dotted #ccc; |
|||
font-size: 0; |
|||
height: 2px; |
|||
} |
|||
|
|||
@media only print { |
|||
hr.editormd-page-break { |
|||
background: none; |
|||
border: none; |
|||
height: 0; |
|||
} |
|||
} |
|||
|
|||
#{$prefix}html-preview { |
|||
textarea { |
|||
display : none; |
|||
} |
|||
|
|||
hr.editormd-page-break { |
|||
background: none; |
|||
border: none; |
|||
height: 0; |
|||
} |
|||
} |
|||
|
|||
#{$prefix}preview-close-btn { |
|||
color: #fff; |
|||
padding: 4px 6px; |
|||
font-size: 18px; |
|||
@include border-radius(500px); |
|||
display: none; |
|||
background-color: #ccc; |
|||
position: absolute; |
|||
top: 25px; |
|||
right: 35px; |
|||
z-index: 19; |
|||
@include transition(background-color 300ms ease-out); |
|||
|
|||
&:hover { |
|||
background-color: #999; |
|||
} |
|||
} |
|||
|
|||
.editormd-preview-active { |
|||
width: 100%; |
|||
padding: 40px; |
|||
} |
|||
|
|||
@ -1,131 +1,151 @@ |
|||
/* Preview dark theme */ |
|||
|
|||
#{$prefix}preview-theme-dark { |
|||
color: #777; |
|||
background:#2C2827; |
|||
|
|||
#{$prefix}preview-container { |
|||
color: #888; |
|||
background-color: #2C2827; |
|||
//font-family: "Meiryo UI", "Helvetica Neue", "Microsoft YaHei"; |
|||
|
|||
pre.prettyprint { |
|||
border: none; |
|||
} |
|||
|
|||
blockquote { |
|||
color: #555; |
|||
padding: 0.5em; |
|||
background: #222; |
|||
border-color: #333; |
|||
} |
|||
|
|||
abbr { |
|||
color: #fff; |
|||
padding: 1px 3px; |
|||
@include border-radius(3px); |
|||
background:#ff9900; |
|||
} |
|||
|
|||
code { |
|||
color: #fff; |
|||
border: none; |
|||
padding: 1px 3px; |
|||
@include border-radius(3px); |
|||
background: #5A9600; |
|||
} |
|||
|
|||
table { |
|||
border: none; |
|||
} |
|||
|
|||
.fa-emoji { |
|||
color: #B4BF42; |
|||
} |
|||
|
|||
.katex { |
|||
color: #FEC93F; |
|||
} |
|||
} |
|||
|
|||
.editormd-toc-menu { |
|||
> .markdown-toc { |
|||
background:#fff; |
|||
border:none; |
|||
|
|||
h1 { |
|||
border-color:#ddd; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.markdown-body { |
|||
h1, h2, hr { |
|||
border-color: #222; |
|||
} |
|||
} |
|||
|
|||
pre { |
|||
color: #999; |
|||
background-color: #111; |
|||
background-color: rgba(0,0,0,.4); |
|||
|
|||
/* plain text */ |
|||
.pln { |
|||
color: #999; |
|||
} |
|||
} |
|||
|
|||
li.L1, li.L3, li.L5, li.L7, li.L9 { |
|||
background: none; |
|||
} |
|||
|
|||
[class*=editormd-logo] { |
|||
color: #2196F3; |
|||
} |
|||
|
|||
.sequence-diagram { |
|||
text { |
|||
fill: #fff; |
|||
} |
|||
|
|||
rect, path { |
|||
color:#fff; |
|||
fill : #64D1CB; |
|||
stroke : #64D1CB; |
|||
} |
|||
} |
|||
|
|||
.flowchart { |
|||
rect, path { |
|||
stroke : #A6C6FF; |
|||
} |
|||
|
|||
rect { |
|||
fill: #A6C6FF; |
|||
} |
|||
|
|||
text { |
|||
fill: #5879B4; |
|||
} |
|||
} |
|||
} |
|||
|
|||
@media screen { |
|||
|
|||
#{$prefix}preview-theme-dark { |
|||
.str { color: #080 } /* string content */ |
|||
.kwd { color: #ff9900; } /* a keyword */ |
|||
.com { color: #444444; } /* a comment */ |
|||
.typ { color: #606 } /* a type name */ |
|||
.lit { color: #066 } /* a literal value */ |
|||
/* punctuation, lisp open bracket, lisp close bracket */ |
|||
.pun, .opn, .clo { color: #660 } |
|||
.tag { color: #ff9900; } /* a markup tag name */ |
|||
.atn { color: #6C95F5; } /* a markup attribute name */ |
|||
.atv { color: #080 } /* a markup attribute value */ |
|||
.dec, .var { color: #008BA7; } /* a declaration; a variable name */ |
|||
.fun { color: red } /* a function name */ |
|||
} |
|||
|
|||
} |
|||
/* Preview dark theme */ |
|||
|
|||
#{$prefix}preview-theme-dark { |
|||
color: #777; |
|||
background:#2C2827; |
|||
|
|||
#{$prefix}preview-container { |
|||
color: #888; |
|||
background-color: #2C2827; |
|||
//font-family: "Meiryo UI", "Helvetica Neue", "Microsoft YaHei"; |
|||
|
|||
pre.prettyprint { |
|||
border: none; |
|||
} |
|||
|
|||
blockquote { |
|||
color: #555; |
|||
padding: 0.5em; |
|||
background: #222; |
|||
border-color: #333; |
|||
} |
|||
|
|||
abbr { |
|||
color: #fff; |
|||
padding: 1px 3px; |
|||
@include border-radius(3px); |
|||
background:#ff9900; |
|||
} |
|||
|
|||
code { |
|||
color: #fff; |
|||
border: none; |
|||
padding: 1px 3px; |
|||
@include border-radius(3px); |
|||
background: #5A9600; |
|||
} |
|||
|
|||
table { |
|||
border: none; |
|||
} |
|||
|
|||
.fa-emoji { |
|||
color: #B4BF42; |
|||
} |
|||
|
|||
.katex { |
|||
color: #FEC93F; |
|||
} |
|||
} |
|||
|
|||
.editormd-toc-menu { |
|||
> .markdown-toc { |
|||
background:#fff; |
|||
border:none; |
|||
|
|||
h1 { |
|||
border-color:#ddd; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.markdown-body { |
|||
h1, h2, hr { |
|||
border-color: #222; |
|||
} |
|||
} |
|||
|
|||
pre { |
|||
color: #999; |
|||
background-color: #111; |
|||
background-color: rgba(0,0,0,.4); |
|||
|
|||
/* plain text */ |
|||
.pln { |
|||
color: #999; |
|||
} |
|||
|
|||
&.prettyprint { |
|||
border: none; |
|||
background-color: #111; |
|||
|
|||
li { |
|||
border-left: 1px solid #222; |
|||
} |
|||
|
|||
&:hover { |
|||
border: none; |
|||
background-color: #000; |
|||
|
|||
li { |
|||
&:hover { |
|||
background-color: rgba(#fff, .1); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
li.L1, li.L3, li.L5, li.L7, li.L9 { |
|||
background: none; |
|||
} |
|||
|
|||
[class*=editormd-logo] { |
|||
color: #2196F3; |
|||
} |
|||
|
|||
.sequence-diagram { |
|||
text { |
|||
fill: #fff; |
|||
} |
|||
|
|||
rect, path { |
|||
color:#fff; |
|||
fill : #64D1CB; |
|||
stroke : #64D1CB; |
|||
} |
|||
} |
|||
|
|||
.flowchart { |
|||
rect, path { |
|||
stroke : #A6C6FF; |
|||
} |
|||
|
|||
rect { |
|||
fill: #A6C6FF; |
|||
} |
|||
|
|||
text { |
|||
fill: #5879B4; |
|||
} |
|||
} |
|||
} |
|||
|
|||
@media screen { |
|||
|
|||
#{$prefix}preview-theme-dark { |
|||
.str { color: #080 } /* string content */ |
|||
.kwd { color: #ff9900; } /* a keyword */ |
|||
.com { color: #444444; } /* a comment */ |
|||
.typ { color: #606 } /* a type name */ |
|||
.lit { color: #066 } /* a literal value */ |
|||
/* punctuation, lisp open bracket, lisp close bracket */ |
|||
.pun, .opn, .clo { color: #660 } |
|||
.tag { color: #ff9900; } /* a markup tag name */ |
|||
.atn { color: #6C95F5; } /* a markup attribute name */ |
|||
.atv { color: #080 } /* a markup attribute value */ |
|||
.dec, .var { color: #008BA7; } /* a declaration; a variable name */ |
|||
.fun { color: red } /* a function name */ |
|||
} |
|||
|
|||
} |
|||
|
|||
@ -1,137 +1,137 @@ |
|||
@charset "UTF-8"; |
|||
|
|||
@import "lib/variables"; |
|||
@import "lib/prefixes"; |
|||
|
|||
.editormd { |
|||
width: 90%; |
|||
height: 640px; |
|||
margin: 0 auto; |
|||
text-align: left; |
|||
overflow: hidden; |
|||
position: relative; |
|||
margin-bottom: 15px; |
|||
border: 1px solid $borderColor; |
|||
font-family: "Meiryo UI", "Microsoft YaHei", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, "Monaco", monospace, Tahoma, STXihei, "华文细黑", STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, "宋体", Heiti, "黑体", sans-serif; |
|||
|
|||
*, *:before, *:after { |
|||
@include box-sizing(border-box); |
|||
} |
|||
|
|||
a { |
|||
text-decoration: none; |
|||
} |
|||
|
|||
img { |
|||
border: none; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
> textarea, |
|||
#{$prefix}html-textarea, |
|||
#{$prefix}markdown-textarea { |
|||
width: 0; |
|||
height: 0; |
|||
outline: 0; |
|||
resize:none; |
|||
} |
|||
|
|||
#{$prefix}html-textarea, |
|||
#{$prefix}markdown-textarea { |
|||
display : none; |
|||
} |
|||
|
|||
input[type="text"], |
|||
input[type="button"], |
|||
input[type="submit"], |
|||
select, textarea, button { |
|||
@include appearance(none); |
|||
} |
|||
|
|||
::-webkit-scrollbar { |
|||
height: 10px; |
|||
width: 7px; |
|||
background: rgba(0, 0, 0, .1); |
|||
|
|||
&:hover { |
|||
background: rgba(0, 0, 0, .2); |
|||
} |
|||
} |
|||
|
|||
::-webkit-scrollbar-thumb { |
|||
background: rgba(0,0,0,0.3); |
|||
@include border-radius(6px); |
|||
|
|||
&:hover { |
|||
@include box-shadow(inset 1px 1px 1px rgba(0, 0, 0, .25)); |
|||
background-color: rgba(0, 0, 0, .4); |
|||
} |
|||
} |
|||
} |
|||
|
|||
#{$prefix}user-unselect { |
|||
@include user-select(none); |
|||
} |
|||
|
|||
#{$prefix}toolbar { |
|||
width: 100%; |
|||
min-height: 37px; |
|||
background: #fff; |
|||
display: none; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
z-index: 10; |
|||
border-bottom: 1px solid $borderColor; |
|||
} |
|||
|
|||
#{$prefix}toolbar-container { |
|||
padding: 0 8px; |
|||
min-height: 35px; |
|||
@include user-select(none); |
|||
} |
|||
|
|||
@import "editormd.menu"; |
|||
|
|||
#{$prefix}container { |
|||
margin: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
padding: 35px 0 0; |
|||
position: relative; |
|||
background: #fff; |
|||
@include box-sizing(border-box); |
|||
} |
|||
|
|||
@import "editormd.dialog"; |
|||
@import "editormd.grid"; |
|||
@import "editormd.tab"; |
|||
@import "editormd.form"; |
|||
@import "editormd.codemirror"; |
|||
@import "editormd.preview"; |
|||
@import "editormd.preview.themes"; |
|||
|
|||
#{$prefix}onlyread { |
|||
#{$prefix}toolbar { |
|||
display: none; |
|||
} |
|||
|
|||
.CodeMirror { |
|||
margin-top: 0; |
|||
} |
|||
|
|||
#{$prefix}preview { |
|||
top: 0; |
|||
} |
|||
} |
|||
|
|||
#{$prefix}fullscreen { |
|||
position: fixed; |
|||
top : 0; |
|||
left : 0; |
|||
border: none; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
@import "editormd.themes"; |
|||
@charset "UTF-8"; |
|||
|
|||
@import "lib/variables"; |
|||
@import "lib/prefixes"; |
|||
|
|||
.editormd { |
|||
width: 90%; |
|||
height: 640px; |
|||
margin: 0 auto; |
|||
text-align: left; |
|||
overflow: hidden; |
|||
position: relative; |
|||
margin-bottom: 15px; |
|||
border: 1px solid $borderColor; |
|||
font-family: "Meiryo UI", "Microsoft YaHei", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, "Monaco", monospace, Tahoma, STXihei, "华文细黑", STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, "宋体", Heiti, "黑体", sans-serif; |
|||
|
|||
*, *:before, *:after { |
|||
@include box-sizing(border-box); |
|||
} |
|||
|
|||
a { |
|||
text-decoration: none; |
|||
} |
|||
|
|||
img { |
|||
border: none; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
> textarea, |
|||
#{$prefix}html-textarea, |
|||
#{$prefix}markdown-textarea { |
|||
width: 0; |
|||
height: 0; |
|||
outline: 0; |
|||
resize:none; |
|||
} |
|||
|
|||
#{$prefix}html-textarea, |
|||
#{$prefix}markdown-textarea { |
|||
display : none; |
|||
} |
|||
|
|||
input[type="text"], |
|||
input[type="button"], |
|||
input[type="submit"], |
|||
select, textarea, button { |
|||
@include appearance(none); |
|||
} |
|||
|
|||
::-webkit-scrollbar { |
|||
height: 10px; |
|||
width: 7px; |
|||
background: rgba(0, 0, 0, .1); |
|||
|
|||
&:hover { |
|||
background: rgba(0, 0, 0, .2); |
|||
} |
|||
} |
|||
|
|||
::-webkit-scrollbar-thumb { |
|||
background: rgba(0,0,0,0.3); |
|||
@include border-radius(6px); |
|||
|
|||
&:hover { |
|||
@include box-shadow(inset 1px 1px 1px rgba(0, 0, 0, .25)); |
|||
background-color: rgba(0, 0, 0, .4); |
|||
} |
|||
} |
|||
} |
|||
|
|||
#{$prefix}user-unselect { |
|||
@include user-select(none); |
|||
} |
|||
|
|||
#{$prefix}toolbar { |
|||
width: 100%; |
|||
min-height: 37px; |
|||
background: #fff; |
|||
display: none; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
z-index: 10; |
|||
border-bottom: 1px solid $borderColor; |
|||
} |
|||
|
|||
#{$prefix}toolbar-container { |
|||
padding: 0 8px; |
|||
min-height: 35px; |
|||
@include user-select(none); |
|||
} |
|||
|
|||
@import "editormd.menu"; |
|||
|
|||
#{$prefix}container { |
|||
margin: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
padding: 35px 0 0; |
|||
position: relative; |
|||
background: #fff; |
|||
@include box-sizing(border-box); |
|||
} |
|||
|
|||
@import "editormd.dialog"; |
|||
@import "editormd.grid"; |
|||
@import "editormd.tab"; |
|||
@import "editormd.form"; |
|||
@import "editormd.codemirror"; |
|||
@import "editormd.preview"; |
|||
@import "editormd.preview.themes"; |
|||
|
|||
#{$prefix}onlyread { |
|||
#{$prefix}toolbar { |
|||
display: none; |
|||
} |
|||
|
|||
.CodeMirror { |
|||
margin-top: 0; |
|||
} |
|||
|
|||
#{$prefix}preview { |
|||
top: 0; |
|||
} |
|||
} |
|||
|
|||
#{$prefix}fullscreen { |
|||
position: fixed; |
|||
top : 0; |
|||
left : 0; |
|||
border: none; |
|||
margin: 0 auto!important; |
|||
} |
|||
|
|||
@import "editormd.themes"; |
|||
|
|||
@ -1,28 +1,28 @@ |
|||
/* Editor.md Dark theme */ |
|||
|
|||
#{$prefix}theme-dark { |
|||
border-color: #1a1a17; |
|||
|
|||
#{$prefix}toolbar { |
|||
background: #1A1A17; |
|||
border-color: #1a1a17; |
|||
} |
|||
|
|||
#{$prefix}menu > li > a { |
|||
color: #777; |
|||
border-color: #1a1a17; |
|||
|
|||
&:hover, &.active { |
|||
border-color: #333; |
|||
background: #333; |
|||
} |
|||
} |
|||
|
|||
#{$prefix}menu > li.divider { |
|||
border-right: 1px solid #111; |
|||
} |
|||
|
|||
.CodeMirror { |
|||
border-right: 1px solid rgba(0,0,0,0.1); |
|||
} |
|||
} |
|||
/* Editor.md Dark theme */ |
|||
|
|||
#{$prefix}theme-dark { |
|||
border-color: #1a1a17; |
|||
|
|||
#{$prefix}toolbar { |
|||
background: #1A1A17; |
|||
border-color: #1a1a17; |
|||
} |
|||
|
|||
#{$prefix}menu > li > a { |
|||
color: #777; |
|||
border-color: #1a1a17; |
|||
|
|||
&:hover, &.active { |
|||
border-color: #333; |
|||
background: #333; |
|||
} |
|||
} |
|||
|
|||
#{$prefix}menu > li.divider { |
|||
border-right: 1px solid #111; |
|||
} |
|||
|
|||
.CodeMirror { |
|||
border-right: 1px solid rgba(0,0,0,0.1); |
|||
} |
|||
} |
|||
|
|||
File diff suppressed because it is too large
File diff suppressed because it is too large
Loading…
Reference in new issue