laobubu / hypermd Goto Github PK
View Code? Open in Web Editor NEWA WYSIWYG Markdown Editor for browsers. Break the Wall between writing and previewing.
License: MIT License
A WYSIWYG Markdown Editor for browsers. Break the Wall between writing and previewing.
License: MIT License
First of all, thank 圆伞科技 for sponsoring HyperMD! I have some plan to make HyperMD much better:
marked
?)hide-token
, shortkeys' performance and user experience, also for #43[Go back]
button of addon/click
to somewhere else..scss
, make it more configurable (eg. dark mode?)
require("xxx.css")
from source, so that we can make HyperMD less opinioned?However, for now, I'm too busy to maintain HyperMD. The plan also need further discussion. Feel free to leave comments. I think this can start in late October.
Hi. This is how the following markdown code renders (and it renders the same in commonmark as well, afaik)
- > What about blockquotes?
> What about them here?
A comment about the quote
What about blockquotes?
What about them here?
A comment about the quote
But on HyperMD, the quote doesn't render properly. It renders like the following:
作者有兴趣加上吗?
Do you need a refactoring to TypeScript?
Seems you are a TypeScript user too, I'm willing to PR if you need it.
感觉这东西需要多语言文档呀!
Thanks for making this awesome markdown editor! Heads down the best I've seen so far, and I've seen 30+.
Do you have plans to add it to npm so that we can install it through jsdelivr's CDN? That would make it faster to load from different parts of the world and speed up adoption.
for example:
https://www.jsdelivr.com/?query=hypermd
There is a minor issue I observed with your demo page, HyperMD
Environment: Chrome 71.0.3578.80 (Win64)
我在代码里只找到一个sm.ms写死的ajaxupload路径,不能配置吗?
I've found a scenario where Ctrl+A does not cover all the text. See below :
Here is a text without any style. Ctrl+A renders well.
After adding a first style to the text (**), Ctrl+A does not cover the first line anymore.
However, Ctrl+A considered the whole text anyway. E.g.: If I want to delete the whole text here is the result:
So it seems to "just" be a display bug.
For instance, on here (and also in commonmark)
This:
[hi] [hello]
[hi]: http://google.com
Renders as
hi [hello]
[hello] is not substituted because no link is provided. This is helpful when you're just using [...] in text without using links
But in HyperMD everything in [...] is treated as linked text. e.g
Hi
I'm trying to use the Katex math renderer in my HyperMD editor, but I must be missing something.
I've imported the powerpack:
import * as katex from 'hypermd/powerpack/fold-math-with-katex';
and I'm instantiating my editor as follows:
var editor = hyp.fromTextArea(el, {
mode: {
name: "hypermd",
theme: "hypermd-light"
},
foldGutter: false,
lineNumbers: false,
hmdFold: {
image: false,
link: false,
math: true
},
hmdHideToken: true,
hmdCursorDebounce: true,
hmdClick: true,
hmdHover: true,
hmdModeLoader: false
});
If I then type
$\Gamma^2 = \Alpha^2+\Beta^2$
in my editor, I get the uppercase Gamma, but neither of the uppercase Alpha nor Beta.
How do I force the editor to use Katex rather than the default math renderer?
Thanks
Tony
表格里面渲染代码块是会有错位的,以及在表格里面的代码块无法换行,表格里面使用单 ` 符号代码块是没问题的,表格里面好像无法渲染列表,除此之外,这个编辑器简直完美,所写即所见
Spaces near highlighted elements (bold, italic, code, strikethrough, etc.) are missing when pasting with the turndown plugin enabled. I've confirmed that this is not a bug with Turndown by pasting the same html into their example
在react里引入
class ClipperFullPagePreiview extends React.Component<ClipperFullPagePreiviewProps> {
onDataChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
const { value } = e.target;
this.props.data.setFullPage(value);
}
componentDidMount = () => {
console.log(document.querySelector('#myyyyy'));
let myTextarea = document.getElementById('myyyyy') as HTMLTextAreaElement;
HyperMD.fromTextArea(myTextarea, {
/* 在此添加其他编辑器选项 */
hmdModeLoader: false, // 见下面的备注
});
}
render() {
return (
<div className={styles.preview}>
<div className={styles.previewContent}>
<textarea id="myyyyy"></textarea>
</div>
</div>
);
}
}
webpack
{
exclude: /node_modules/,
test: [/\.scss$/, /\.css$/],
use: [
{
loader: 'style-loader'
},
{
loader: 'typings-for-css-modules-loader',
options: {
modules: true,
namedExport: true,
camelCase: true,
localIdentName: '[path][name]__[local]--[hash:base64:5]'
}
},
{
loader: 'sass-loader'
}
]
}
I tried on https://laobubu.net/HyperMD/#./docs/zh-CN/README.md with the following text:
# 1
1.1
------
## 1.2
webpack.config.js
const path = require('path');
module.exports = {
entry: './index.js',
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.(woff|woff2|eot|ttf)$/i,
loader: "file-loader?name=./static/fonts/[name]-[hash].[ext]"
},
{
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=8192&name=./static/img/[hash].[ext]',
}
]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};
index.js
var HyperMD = require("hypermd")
require("codemirror/mode/htmlmixed/htmlmixed") // Markdown 内嵌HTML
require("codemirror/mode/stex/stex")
require("codemirror/mode/yaml/yaml")
require("hypermd/powerpack/fold-math-with-katex")
require("hypermd/powerpack/hover-with-marked")
var myTextarea = document.getElementById("myTextarea")
var cm = HyperMD.fromTextArea(myTextarea, {
hmdModeLoader: false,
})
打包后访问页面控制台报错Uncaught Error: Cannot find module 'codemirror'
I think this will be a very good change for paste-image.
I have found that some Github Flavored Mode (GFW) features are not supported:
Are these known issues?
I read codemirror's manual and hopefully it would be working on hyperMD since it work side by side with codemirror
code snippet from docs with lineNumber option (added)
var cm = HyperMD.fromTextArea(myTextarea, {
/* ...other editor options */
mode: {
name: "hypermd",
lineNumbers: false,
hashtag: true, // example. enable hashtag
}
})
It seems not working.
我按照快速开始中的代码:
var HyperMD = require("hypermd")
// hypermd 模块会引入 codemirror 和一堆 css 文件
// 如果需要为特殊元素添加语法高亮,请载入对应的模式
require("codemirror/mode/htmlmixed/htmlmixed") // Markdown 内嵌HTML
require("codemirror/mode/stex/stex") // TeX 数学公式
require("codemirror/mode/yaml/yaml") // Front Matter
// 如果需要用第三方库增强 HyperMD 功能,请载入所需的 PowerPacks
require("hypermd/powerpack/fold-math-with-katex") // 将会自动引入 "katex"
require("hypermd/powerpack/hover-with-marked") // 将会自动引入 "marked"
// 你还可以再此添加其他 power packs...
// Power packs 需要第三方库,别忘记安装它们!
var myTextarea = document.getElementById("myTextarea")
var cm = HyperMD.fromTextArea(myTextarea, {
/* 在此添加其他编辑器选项 */
hmdModeLoader: false, // 见下面的备注
})
If I use CM's placeholder addon to display a placeholder inside HyperMD, it appears as raw Markdown, like "# This title rocks!". However, it would be nicer to have HyperMD render it.
Can we support rendering placeholder as well?
Thanks!
Great project! I've been looking for something like this to fork for a while ;-) Any chance you'll add multi-caret editing? This is one of the main functionalities I miss in most MD editors.
https://demo.laobubu.net/ 的 ```javascript 没有被正常识别好像。
或者提供一个展示写出的markdown的模式
否则恐怕因为一些歧义导致写的时候和看的时候效果有差异
Error:
<path>/node_modules/hypermd/powerpack/paste-with-turndown.d.ts
(1,22): File '<path>/node_modules/hypermd/src/powerpack/typings/turndown.d.ts' not found.
This is because the paste-with-turndown.d.ts file is referencing a file not included in the npm package:
/// <reference path="../src/powerpack/typings/turndown.d.ts" />
I notice this behavior of HyperMD:
When a document's first line is something like this #Some Title
, and the page is first loaded, that line is first rendered as Markdown, then "collapses" into plain text. That is, the line is not rendered as Markdown, instead, it appears as plain "#Some Title".
This creates a flicker on the first load, which might not be the smoothest UX possible.
Actually this is reproducible on the official demo: simply navigate to that page, and you will notice that the first "#HyperMD" line is collapsed, right after the page is loaded.
Is there a way to disable this behavior, so that everything is rendered on the first load?
Thank you!
In fold.js supports Ctrl+click to open links, and "break mark" for images.
// current behavior: around line 214 in fold.js:
img.addEventListener("click", function (ev) {
if (ev.ctrlKey || ev.altKey) {
window.open(url, "_blank")
ev.preventDefault()
return
}
breakMark(cm, marker, 1)
cm.focus()
}, false)
With small extension in fold.js, it will make it possible to support thumbnail scenarios.
For example I'm looking to support this:
To have universal solution, perhaps we add the option to have click handled in options like this?
const cm = CodeMirror(myDiv, {
...
hmdFold: {
click: (type: "link" | "image", url: string, ev: KeyboardEvent): boolean
}
click() handler will return true if it handles the event, and no further processing is needed
click() handler returns false to show codemirror test (the "breakMark(...)" code will execute)
Example click handler:
function click(type: "link" | "image", url: string, ev: KeyboardEvent): boolean {
if (ev.ctrlKey || ev.altKey) {
return false; // let editor handle, will show markdown text
}
if (type === "image") {
url = url.replace("__thumb__", ""); // switch to full size image
}
// open link or full image in new tab
window.open(url, "_tab");
ev.preventDefault();
return true;
}
Hi guys,
Thank you for this awesome project.
As I was saying in #21 I cannot get HyperMD (the typescript version) to work with react-codemirror.
I made a really simple test case to investigate but I couldn't find the issue.
Demo:
https://github.com/cgestes/react-hypermd-demo
Any idea how I can find what is wrong with this demo?
期待支持表格的版本
Just moving the discussion here from the closed PR.
I make a simple working insert-file.ts addon, as we discussed above. Here it is: https://gist.github.com/nokola/f11f91b15ee4acdd17588334e1b57f78
I won't have time to extend it yet, because I have to work on other parts of my project (the actual file upload...)
I think it's best that it's part of HyperMD, but I wanted the addon today to continue with my project, so I made this quick/simple one.
I'm not sure the best way to interact with CodeMirror, perhaps you have a better idea.
Please feel free to use as you wish/copy/etc. or just use the .js output!
你提供的文档中的快速开始案例:http://laobubu.net/HyperMD/?directOpen#./docs/zh-CN/index.md
我使用的用parcel打包的方法,运行效果:
查看网页源代码:
<!DOCTYPE HTML>
<html>
<head>
<title>绝赞编辑器</title>
<link rel="stylesheet" href="/web-editor.60694ee1.css"></head>
<body>
<textarea id="myTextarea" height="1000px"># Hello World</textarea>
<script src="/web-editor.60694ee1.js"></script>
</body>
</html>
点击链接查看 /web-editor.60694ee1.css
发现文件开头:
/* BASICS */
.CodeMirror {
/* Set height, width, borders, and global font properties here */
font-family: monospace;
height: 300px;
color: black;
direction: ltr;
}
这个高度300px应该不合理吧?你能在云端改下这个css文件吗?
或者请问我在本地可以通过什么方法改变文本框高度吗?(我刚刚入门,不是很懂)
To reproduce:
hmdPasteImage: false, // **----> set to true to remove error**
Expected:
Loads OK
Actual:
Error on load
Uncaught TypeError: Cannot create property 'enabled' on boolean 'false'
at Object.hmdPasteImage (paste-image.js:233)
at new CodeMirror$1 (codemirror.js:7826)
at CodeMirror$1 (codemirror.js:7771)
at hypermdtest.html:64
Note: I have two editors side-by-side, I want to allow pasting images in one, but disallow in the other. However, when I disallow pasting, I'm seeing the issue above.
Sample HTML to see the issue
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HyperMD Test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/codemirror.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/addon/fold/foldgutter.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/addon/dialog/dialog.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/addon/fold/foldgutter.min.css">
<link rel="stylesheet" href="https://demo.laobubu.net/hypermd/theme/hypermd-light.css">
<link rel="stylesheet" href="https://demo.laobubu.net/hypermd/mode/hypermd.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/codemirror.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/addon/mode/simple.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/addon/search/searchcursor.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/addon/dialog/dialog.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/addon/fold/foldcode.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/addon/fold/foldgutter.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/addon/fold/markdown-fold.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/addon/mode/overlay.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/addon/edit/continuelist.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/mode/meta.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/mode/xml/xml.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/mode/markdown/markdown.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/mode/gfm/gfm.min.js"></script>
<script src="https://demo.laobubu.net/hypermd/mode/hypermd.js"></script>
<script src="https://demo.laobubu.net/hypermd//addon/hide-token.js"></script>
<script src="https://demo.laobubu.net/hypermd//addon/cursor-debounce.js"></script>
<script src="https://demo.laobubu.net/hypermd//addon/fold.js"></script>
<script src="https://demo.laobubu.net/hypermd//addon/readlink.js"></script>
<script src="https://demo.laobubu.net/hypermd//addon/click.js"></script>
<script src="https://demo.laobubu.net/hypermd//addon/hover.js"></script>
<script src="https://demo.laobubu.net/hypermd//addon/paste.js"></script>
<script src="https://demo.laobubu.net/hypermd//addon/paste-image.js"></script>
<script src="https://demo.laobubu.net/hypermd//addon/mode-loader.js"></script>
<script src="https://demo.laobubu.net/hypermd/hypermd.js"></script>
<style>
.test {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="test" id="panelNotes"></div>
<script>
var panelNotes = document.getElementById("panelNotes");
panelNotes.innerHTML = "";
var editor = CodeMirror(panelNotes, {
lineNumbers: false,
lineWrapping: true,
showCursorWhenSelecting: true,
cursorHeight: 0.95,
theme: "hypermd-light",
mode: "text/x-hypermd",
tabSize: 4,
foldGutter: true,
gutters: [
"CodeMirror-linenumbers",
"CodeMirror-foldgutter",
"HyperMD-goback"
],
extraKeys: {
"Ctrl-Q": function (cm) { cm.foldCode(cm.getCursor()); },
"Ctrl-.": "findNext",
"Ctrl-,": "findPrev",
"Esc": "clearSearch",
"Enter": "newlineAndIndentContinueMarkdownList"
},
hmdHideToken: "(profile-1)",
hmdCursorDebounce: true,
hmdAutoFold: 200,
// (addon) paste
// copy and paste HTML content
hmdPaste: true,
// (addon) paste-image
// copy, paste and upload image
hmdPasteImage: false, // **----> set to true to remove error**
});
editor.hmdHoverInit() // tooltips on footnotes
editor.hmdClickInit(); // open link, toggle todo item etc.
</script>
</body>
</html>
Reproduced in the basic example:
I really like the new mode where the bold, etc markers (the star * symbols) appear without offsetting the text.
Here's a suggestion of how to do similar improvement for headings: add whitespace to the left, then paint the "##" symbols there (perhaps a hack with codemirror's renderline() or something else?)
What do you think?
当然,我是指编辑的时候自动加入空格。不知道是否有什么代码是可以实现的。
我知道HyperMD有个getValue()
方法可以获取到Markdown内容,那请问如何获取到markdown渲染后的HTML内容呢?
Steps to reproduce:
# Test folding indent
1. Ensure test cert in player settings is not expired. Create new one if needed
Expected:
All OK
First, thank you for such an innovative library.
Currently, the markdown support is amazing, and for those of us that know markdown syntax well, this library works really well. However, for those not familiar with markdown, they may feel lost.
A toolbar can be as simple as the toolbar in Github, or something like Notion.io where you type in the @ symbol to reveal a list of options to add, although the list of options doesn't work that great with marking up existing text.
Unfortunately, I'm not sure where it is causing this problem.
按照你github上面的demo页面代码拷贝到本地,控制器也没有报错,还是没有跑起来
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.