Git Product home page Git Product logo

marked-extensions's Introduction

marked-extensions

Marked extensions workspace.

Packages

Package Description Version (click for changelog)
marked-alert Enables GFM alerts npm
marked-directive Supports directives syntax npm
marked-code-format Formatting code blocks using Prettier npm
marked-code-jsx-renderer Render JSX code blocks using a custom renderer and components npm
marked-code-preview Transform code blocks into code previews npm
marked-footnote Enables GFM footnotes. npm
marked-plaintify Converts Markdown to Plaintext npm
marked-sequential-hooks Enables the sequential preprocessing and post-processing npm
marked-shiki Integrating Shiki syntax highlighting npm

Sequential hooks

Incorporate the power of sequential hooks using the following packages within sequential hooks:

Show the example code 🚀
import { Marked } from 'marked'
import markedSequentialHooks from 'marked-sequential-hooks'

const html = new Marked()
  .use(
    markedSequentialHooks({
      markdownHooks: [mdHoook1(), mdHook2],
      htmlHooks: [htmlHook1(), htmlHook2]
    })
  )
  .parse('# Content')

console.log(html)
Package Types Description Version (click for changelog)
marked-hook-data MarkdownHook A sequential hook to load data from files or objects npm
marked-hook-frontmatter MarkdownHook A sequential hook to support frontmatter npm
marked-hook-layout HtmlHook A sequential hook that handles layouts npm

Contributing

We 💛  issues.

When committing, please conform to the semantic-release commit standards. Please install commitizen and the adapter globally, if you have not already.

npm i -g commitizen cz-conventional-changelog

Now you can use git cz or just cz instead of git commit when committing. You can also use git-cz, which is an alias for cz.

git add . && git cz

marked-extensions's People

Contributors

bent10 avatar irian-codes avatar m-pawlowicz avatar renovate[bot] avatar semantic-release-bot avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

marked-extensions's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions
.github/workflows/pr-title.yml
  • actions/checkout v4
  • amannn/action-semantic-pull-request v5
.github/workflows/release.yml
  • actions/checkout v4
  • actions/setup-node v4
.github/workflows/validate.yml
  • actions/checkout v4
  • actions/setup-node v4
html
packages/footnote/index.html
  • github-markdown-css 5.6.1@sha512-SLv8CNVAxhcbDQfwc9dS5OuZAAYqdTGJTBSUtKNQbCUO2gMno4Fp2Vn8Xsvj993RcofNfj2d5JA0jYBve4SEXA==
npm
package.json
  • @types/babel__core ^7.20.5
  • @types/common-ancestor-path ^1.0.2
  • @types/moo ^0.5.9
  • @types/react-dom ^18.3.0
  • @types/set-value ^4.0.3
  • doogu ^3.2.13
  • marked ^13.0.3
  • prettier-plugin-svelte ^3.2.6
  • pupa ^3.1.0
  • react-dom ^18.3.1
  • vite-plugin-cachedir ^1.2.0
  • vite-plugin-resolve-umd-format ^1.0.0
packages/alert/package.json
  • marked >=7.0.0
packages/code-format/package.json
  • attributes-parser ^2.2.2
  • marked >=7.0.0
  • prettier >=3.0.0
packages/code-jsx-renderer/package.json
  • @babel/core ^7.25.2
  • @babel/preset-react ^7.24.7
  • attributes-parser ^2.2.2
  • marked >=7.0.0
packages/code-preview/package.json
  • attributes-parser ^2.2.2
  • marked >=7.0.0
packages/directive/package.json
  • attributes-parser ^2.2.2
  • seedrandom ^3.0.5
  • marked >=7.0.0
packages/footnote/package.json
  • marked >=7.0.0
packages/hook-data/package.json
  • fast-glob ^3.3.2
  • loadee ^3.1.1
  • common-ancestor-path ^1.0.1
  • set-value ^4.1.0
  • marked >=7.0.0
packages/hook-frontmatter/package.json
  • @types/js-yaml ^4.0.9
  • js-yaml ^4.1.0
  • moo ^0.5.2
  • marked >=7.0.0
packages/hook-layout/package.json
  • marked >=7.0.0
packages/plaintify/package.json
  • marked >=13.0.0
packages/sequential-hooks/package.json
  • marked >=7.0.0
packages/shiki/package.json
  • @shikijs/transformers 1.14.1
  • shiki 1.14.1
  • marked >=7.0.0
  • shiki >=1.0.0

  • Check this box to trigger a request for Renovate to run again on this repository

Footnote numbering increments every time the same string is parsed, instead of resetting

  • Extension Name: marked-footnote
  • Extension Version: 1.2.0
  • Project Version:
  • Device: [e.g Desktop] Any
  • OS@version (or Browser): Any
  • Node And NPM Version: Any

Description

Parsing markdown with footnotes output is non-idempotent, see reproduction for example.

To Reproduce (⚠️ read below)

Expected Behavior

	const str = `Here's a simple footnote,[^1] thanks.

[^1]: This is the first footnote.`;
	let rendered = marked.parse(str);
	console.log(`rendered:`, rendered);
	// Output:
<p>Here&#39;s a simple footnote,<sup><a id=\"footnote-ref-1\" href=\"#footnote-1\" data-footnote-ref aria-describedby=\"footnote-label\">[1]</a></sup> thanks.</p>
<section class=\"footnotes\" data-footnotes>
<h2 id=\"footnote-label\" class=\"sr-only\">Footnotes</h2>
<ol>
<li id=\"footnote-1\">
<p>This is the first footnote. <a href=\"#footnote-ref-1\" data-footnote-backref aria-label=\"Back to reference 1\">↩</a></p>
</li>
</ol>
</section>


	rendered = marked.parse(str);
	console.log(`rendered:`, rendered);
	// Output:
	<p>Here&#39;s a simple footnote,<sup><a id=\"footnote-ref-1\" href=\"#footnote-1\" data-footnote-ref aria-describedby=\"footnote-label\">[2]</a></sup> thanks.</p>
<section class=\"footnotes\" data-footnotes>
<h2 id=\"footnote-label\" class=\"sr-only\">Footnotes</h2>
<ol>
<li id=\"footnote-1\">
<p>This is the first footnote. <a href=\"#footnote-ref-1\" data-footnote-backref aria-label=\"Back to reference 1\">↩</a></p>
</li>
</ol>
</section>

The second time the same string is parsed, the superscript is now [2], instead of [1], even though the other reference IDs correctly have it as [1].

Actual Behavior

Superscript is [2]

Additional Information

TypeError occurs when parsing a Markdown document with footnotes after parsing a Markdown document without footnotes using the same Marked object

  • Extension Name: marked-footnote
  • Extension Version: v1.2.1
  • Project Version:
  • Device: [e.g Desktop] all of devices
  • OS@version (or Browser):
  • Node And NPM Version:

Description

I found a TypeError occurs when parsing a Markdown document with footnotes after parsing a Markdown document without footnotes using the same Marked object.

Error: making content2 raises error.
description: TypeError: Cannot read properties of undefined (reading 'filter')
Please report this to https://github.com/markedjs/marked.
    at Object.tokenizer (https://cdn.jsdelivr.net/npm/[email protected]:7:1092)
    at https://cdn.jsdelivr.net/npm/[email protected]:7:22564
    at Array.some (<anonymous>)
    at ne.inlineTokens (https://cdn.jsdelivr.net/npm/[email protected]:7:22548)
    at ne.lex (https://cdn.jsdelivr.net/npm/[email protected]:7:19159)
    at lex (https://cdn.jsdelivr.net/npm/[email protected]:7:18986)
    at oe.parse (https://cdn.jsdelivr.net/npm/[email protected]:7:33689)
    ...

The error does not occur in version 1.2.0.

To Reproduce (⚠️ read below)

Parse a Markdown document with footnotes after parsing a Markdown document without footnotes using the same Marked object.

https://replit.com/@krymtkts/marked-footnote-repro2#index.html

Expected Behavior

No errors occurs.

Actual Behavior

An error occurs.

Additional Information

Why does the markedFootnote plugin affect the parsing of the markedHighlight highlighting plugin?

import { Marked } from 'marked'
import { markedHighlight } from 'marked-highlight' // Code highlighting
import markedFootnote from 'marked-footnote' // Footnotes
import hljs from 'highlight.js'
import type { SynchronousOptions } from 'marked-highlight' // Code highlighting options

const optionHighlight: SynchronousOptions = {
  langPrefix: 'hljs language-',
  highlight(code, lang) {
    const language = hljs.getLanguage(lang) ? lang : 'plaintext'
    return hljs.highlight(code, { language }).value
  },
}

const marked = new Marked()

marked.use(
  markedFootnote(),
  markedHighlight(optionHighlight),
)

console.log("has content====>", marked.parse(`
# heading1
\`\`\`javascript
const highlight = "code";
\`\`\`
`))

console.log("no cotent ====>", marked.parse(`
\`\`\`javascript
const highlight = "code";
\`\`\`
`))


/*
You update the plugins very timely. I discovered an issue while using it.
1. When there is no content before a block of code, marked parsing causes the code highlighting plugin highlight.js to fail.
2. When there is content before a block of code, marked parsing works fine and the code highlighting plugin highlight.js works normally.
3. When there is no content before inline code, comment out line 18 markedFootnote plugin, marked parsing works fine, and the code highlighting plugin highlight.js works normally.

Why does the markedFootnote plugin affect the highlight.js plugin? Could you please take a look for me? Thank you.
I've also tried to replace the order of the plugins in the use method but still couldn't solve the problem.


When there is content before a code block, correct parsing result
has content====> <h1>heading1</h1>
<pre><code class="hljs language-javascript"><span class="hljs-keyword">const</span> highlight = <span class="hljs-string">&quot;code&quot;</span>;
</code></pre>

When there is no content before a code block, incorrect parsing result.
no cotent ====> <pre><code class="hljs language-javascript">const highlight = &quot;code&quot;;
</code></pre>

When the markedFootnote plugin is commented out, all results are parsed correctly.

When there is content before a code block, correct parsing result
has content====> <h1>heading1</h1>
<pre><code class="hljs language-javascript"><span class="hljs-keyword">const</span> highlight = <span class="hljs-string">&quot;code&quot;</span>;
</code></pre>

When there is no content before a code block, correct parsing result
cotent ====> <pre><code class="hljs language-javascript"><span class="hljs-keyword">const</span> highlight = <span class="hljs-string">&quot;code&quot;</span>;
</code></pre>
*/

bug description

version

  • marked:11.0.1
  • marked-footnote:1.2.0
  • marked-highlight:2.0.9
  • highlight.js: 11.9.0

You update the plugins very timely. I discovered an issue while using it.

  1. When there is no content before a block of code, marked parsing causes the code highlighting plugin highlight.js to fail.
  2. When there is content before a block of code, marked parsing works fine and the code highlighting plugin highlight.js works normally.
  3. When there is no content before inline code, comment out line 18 markedFootnote plugin, marked parsing works fine, and the code highlighting plugin highlight.js works normally.
  4. The above TypeScript code can directly reproduce the bug.

Why does the markedFootnote plugin affect the highlight.js plugin? Could you please take a look for me? Thank you.
I've also tried to replace the order of the plugins in the use method but still couldn't solve the problem.

  • When there is content before a code block, correct parsing result
<h1>heading1</h1>
<pre><code class="hljs language-javascript"><span class="hljs-keyword">const</span> highlight = <span class="hljs-string">&quot;code&quot;</span>;
</code></pre>
  • When there is no content before a code block, incorrect parsing result.
<pre><code class="hljs language-javascript">const highlight = &quot;code&quot;;
</code></pre>

When the markedFootnote plugin is commented out, all results are parsed correctly.

  • When there is content before a code block, correct parsing result
<h1>heading1</h1>
<pre><code class="hljs language-javascript"><span class="hljs-keyword">const</span> highlight = <span class="hljs-string">&quot;code&quot;</span>;
</code></pre>
  • When there is no content before a code block, correct parsing result
<pre><code class="hljs language-javascript"><span class="hljs-keyword">const</span> highlight = <span class="hljs-string">&quot;code&quot;</span>;
</code></pre>

The footnotes in the main text of the footnote plugin should be numbered and decoupled from the order of footnote writing.

Here's a simple footnote,1 and here's a longer one.2


github markdown Source code
image

Content parsed by github
image

Content parsed by your plugin
image

bug

Extension Name: marked-footnote
Extension Version: v1.1.3

Seeing your plugin is excellent, I've identified the following two issues.

  • Please consider the above footnotes. On GitHub, the superscript in the main text for footnote markers should not display the content of the footnote but rather the sequential number of the footnote in the entire document.

  • The writing of footnotes should not be constrained by their position before or after the main text. It should be decoupled to avoid the need to constantly check if the footnote order is correct.

I would greatly appreciate it if you could address these two points. Thank you very much.

Footnotes

  1. This is the first footnote.

  2. Here's one with multiple paragraphs and code.

    Indent paragraphs to include them in the footnote.

    { my code }

    Add as many paragraphs as you like.

marked-directive - ESM browser module support

  • Extension Name: marked-directive
  • Extension Version: 1.0.4

Use case

Need to be able to use in a browser without npm. Not everyone is using Node and npm to build small use case apps.

Proposal

Please make a build that supports ems browser module import.

The Markdown link seems to be preventing the footnotes generation.

  • Extension Name: marked-footnote
  • Extension Version: v1.1.2
  • Project Version:
  • Device: [e.g Desktop] all of devices
  • OS@version (or Browser): Windows 11 Home 23H2 22631.2715
  • Node And NPM Version:

Description

The Markdown link seems to be preventing the footnotes generation.

Specifically, [ causes a bug.

To Reproduce (⚠️ read below)

https://replit.com/@krymtkts/marked-footnote-repro#index.html

<!doctype html>
<html lang="en">
  <body class="markdown-body">
    <div id="content"></div>

    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked-footnote/dist/index.umd.min.js"></script>
    <script>
      const md = `# Example

[^1]: works fine.

[^2]: not work with [link](https://github.com/bent10/marked-extensions/tree/main/packages/footnote).

it works fine[^1]. not work with link[^2].
`

      document.getElementById("content").innerHTML = new marked.Marked()
        .use(markedFootnote())
        .parse(md)
    </script>
  </body>
</html>

Expected Behavior

Footnotes are not generated.

Actual Behavior

Footnotes are generated.

Additional Information

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.