remarkjs / remark-breaks Goto Github PK
View Code? Open in Web Editor NEWplugin to add break support, without needing spaces
Home Page: https://remark.js.org
License: MIT License
plugin to add break support, without needing spaces
Home Page: https://remark.js.org
License: MIT License
## Line 1
Line 2
Line 1
Line 2
---------
These don't add <br>
. Not sure if I'm using it wrong, works on others eg. unordered list
Would be great to have. Headings use breaks just as much as other nodes do.
It's a short function, so I did read it, but I don't know how unified, remark etc. work, so I'm guessing the issue is that it visits tree for 'text'
Workaround
# Line 1
# Line 2
<style> h1:nth-child... // of-type...
lastest (3.0.2)
https://stackblitz.com/edit/github-4rc9wa
|a|b|c| |--|--|--| |d|e|This paragraph should have a <br>|
The text of the 2nd line is considered as a new td in a new tr
No response
No response
No response
No response
As of now remark (as well as markdown spec) collapse all blank lines between paragraphs.
If you have:
This is a
paragraph.
This is another
paragraph.
You would get:
<p>This is a<br>
paragraph.</p>
<p>This is another<br>
paragraph.</p>```
Would be great if remark-brakes took some flag which would instead result in:
```html
<p>This is a<br>
paragraph.</p>
</br>
</br>
</br>
</br>
<p>This is another<br>
paragraph.</p>
If you can point out what should be done will try to provide PR (if desired),
thanks!
This upsets Yarn 2, currently need this in .yarnrc.yml
as a workaround:
packageExtensions:
"remark-breaks@*":
dependencies:
"unist-util-visit": "*"
Skipping the template since this isn't an "unexpected behavior" type of bug.
3.0.2
https://codesandbox.io/s/remark-breaks-bug-example-by1dli
Code Snippet:
import ReactMarkdown from "react-markdown";
import remarkBreaks from "remark-breaks";
const markdown = `
# Test h1 with
a linebreak
Test h1 with
a linebreak
===========
Test h2 with
a linebreak
-----------
## Test h2 with
a linebreak
Test paragraph with
a linebreak
`;
export default function App() {
return (
<div className="App">
<ReactMarkdown remarkPlugins={[remarkBreaks]} children={markdown} />
</div>
);
}
Should render (whitespace added for readability)
<h1>Test h1 with<br />a linebreak</h1>
<h1>Test h1 with<br />a linebreak</h1>
<h2>Test h2 with<br />a linebreak</h2>
<h2>Test h2 with<br />a linebreak</h2>
<p>Test pagaraph with<br />a linebreak</p>
It instead renders (whitespace added for readability)
<h1>Test h1 with</h1>
<p>a linebreak</p>
<h1>Test h1 with<br />a linebreak</h1>
<h2>Test h2 with<br />a linebreak</h2>
<h2>Test h2 with</h2>
<p>a linebreak</p>
<p>Test pagaraph with<br />a linebreak</p>
A definition list should provide lazy continuation in markdown. example doc.
For instance, the package remark-definition-list
is a remark plugin for creating definition lists for markdown files supporting lazy continuation like below:
Term 1
: Definition bla bla
with lazy continuation.
So, the definition above in markdown
should not break.
If one of the parent/grand parents type is a descriptiondetails
or descriptionterm
or descriptionlist
, the text node will be omitted without break.
You can have a look at the sample markdown AST for definition lists. here
Maybe, the plugin can provide an option (optional) to provide the parent types in an array which is going to be omitted, like {omit: ["descriptiondetails", "descriptionterm", "descriptionlist"]}
for giving flexibility to developers.
The transformer can work on the AST without unified. It may be useful to use this as a plain function.
Move the transformer into a new package mdast-util-breaks
. This package would be part of syntax-tree.
I chose the name to match the name remark-breaks
, but it may make sense to use something more verbose, e.g.: mdast-util-break-newlines
.
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.