jaywcjlove / parcel-plugin-markdown-string Goto Github PK

View Code? Open in Web Editor NEW

21.0 3.0 5.0 510 KB

📦@parcel-bundler plugin for loader markdown string, markdown output HTML.

Home Page: https://jaywcjlove.github.io/parcel-plugin-markdown-string

License: MIT License

JavaScript 32.02% HTML 27.61% TypeScript 40.37%

parcel-bundler parcel-plugin parceljs markdown markdown-to-html

parcel-plugin-markdown-string's Introduction

parcel-transformer-markdown

Parcel 2 plugin for loader markdown string, markdown output HTML.

⚠️ ~~parcel-plugin-markdown-string~~ => parcel-transformer-markdown

- parcel-plugin-markdown-string 
+ parcel-transformer-markdown

Example usage

Install the plugin

npm install parcel-transformer-markdown --save-dev

.parcelrc

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.md": [ "parcel-transformer-markdown" ]
  }
}

index.html:

<!DOCTYPE html>
<div id="root"></div>
<script type="module" src="index.js"></script>

Output HTML string

Import your markdown files! Output HTML string.

import HTMLStr from './Markdown.md';

console.log(HTMLStr) // => Output HTML string.
document.body.innerHTML = HTMLStr;

Output Markdown string

// .markedrc
{
  "marked": false
}

import str from './Markdown.md';

console.log(str) // => Output Markdown string.
document.body.innerHTML = str;

Configuration

Marked can be configured using a .markedrc, .markedrc.js, or marked.config.js file. See the Marked API Reference for details on the available options.

Note: .markedrc.js and marked.config.js are supported for JavaScript-based configuration, but should be avoided when possible because they reduce the effectiveness of Parcel's caching. Use a JSON based configuration format (e.g. .markedrc) instead.

There is a marked configuration that converts markdown to HTML. Otherwise just read the markdown string.

{
  "marked": {
    "breaks": true,
    "pedantic": false,
    "gfm": true,
    "tables": true,
    "sanitize": false,
    "smartLists": true,
    "smartypants": false,
    "xhtml": false
  }
}

Contributors

As always, thanks to our amazing contributors!

Made with github-action-contributors.

License

MIT © Kenny Wong

parcel-plugin-markdown-string's People

Contributors

Stargazers

Watchers

Forkers

jakubkubista fdiskas epimodev mkg20001 jondcallahan

parcel-plugin-markdown-string's Issues

not importing content of .md files as strings

I'm pointing to the correct .md file but am getting this /4bf131f7c7a6f8795cb4e1a26899a73e.md instead of the content of the file as a string 😞

following README for getting HTML string didn't work for me

I only got markdown when I was trying to get HTML. By putting console.log statements in the code, I noticed that the default config had:

{ marked: undefined, html: undefined }

I ended up just doing an asset transformation, which is what originally looking for. Would be nice if how to do that were more clearly explained in the README. Here's the example I came up with that seems to work for me:
https://github.com/ultrasaurus/hello-parcel-markdown/tree/simple-asset-transform

basically, just needed to add .markedrc with

{
    "marked": true,
    "html": true
}

then `yarn parcel src/index.md`

Doesn't work with node on Windows because of process.env.PWD

The plugin breaks on parsing Markdown files on Windows machine with the following error (full paths omitted):

×  ...\src\...\page.md: The "path" argument must be of type string. Received type undefined
    at assertPath (path.js:39:11)
    at Object.parse (path.js:910:5)
    at Resolver.findPackage (...\node_modules\parcel-plugin-markdown-string\node_modules\parcel-bundler\src\Resolver.js:419:21)
    at MarkdownAsset.parse (...\node_modules\parcel-plugin-markdown-string\MarkdownAsset.js:10:37)
    at MarkdownAsset.parseIfNeeded (...\node_modules\parcel-plugin-markdown-string\node_modules\parcel-bundler\src\Asset.js:63:29)

The problem is env.PWD - apparently, it's always undefined on non-*NIX systems; process.cwd() can be used instead.

I was able to fix the issue by using patch-package with the following change in MarkdownAsset.js:

class MarkdownAsset extends Asset {
     this.type = 'js';
   }
   async parse(markdownString) {
-    const pkg = await this.resolver.findPackage(this.options.env.PWD);
+    const pkg = await this.resolver.findPackage(process.cwd());
     if (pkg && pkg.marked) {
       this.code = marked(markdownString, pkg.marked);
     } else {

Might as well submit a pull request with this fix, if you want :)

Support parcel v2

parcel-bundler/parcel#3357

Dependency Dashboard

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

Other Branches

These updates are pending. To force PRs open, click the checkbox below.

chore(deps): update actions/checkout action to v4
chore(deps): update actions/setup-node action to v4
chore(deps): update peaceiris/actions-gh-pages action to v4

Open

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

chore(deps): update dependency posthtml-parser to ^0.12.0
fix(deps): update dependency @types/marked to v6
fix(deps): update dependency marked to v12
Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/ci.yml

actions/checkout v3

actions/setup-node v3

peaceiris/actions-gh-pages v3

ncipollo/release-action v1

npm

example/package.json

parcel ^2.2.0

posthtml-parser ^0.11.0

package.json

@babel/runtime ^7.16.7

@parcel/plugin ^2.2.0

@types/marked ^5.0.0

marked ^5.0.0

@parcel/config-default ^2.3.2

@parcel/core ^2.3.2

tsbb ^4.1.5

parcel ^2.2.0

node >= 18.0.0

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

Markdown with JS code block breaks with template literal interpolation

code.md (remove blackslash \)

\`\`\`js
const age = 100
const str = `Hello, I am ${age} years old.`
\`\`\`

index.js

import code from './code.md'

index.html

<script src="index.js"></script>

package.json

"scripts": {
  "start": "parcel index.html"
}

Uncaught ReferenceError: age is not defined

Settings required to convert from markdown to html

Hi, there

I have installed parcel-plugin-markdown-string, what are required settings to convert from markdown file into html file ?

Please guide, thanks

Output

package.json

{
  "devDependencies": {
    "parcel-plugin-markdown-string": "^1.3.2"
  }
}

index.md

### Overview

Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur libero accusantium aut maxime, sequi, facere, exercitationem quos ipsa dolore placeat quam. Error nemo cum quaerat provident dolores, excepturi debitis repellendus.

### Links

[google.com]('https://google.com')

index.js

import html from './index.md'
console.log(html)

jaywcjlove / parcel-plugin-markdown-string Goto Github PK

parcel-plugin-markdown-string's Introduction

parcel-transformer-markdown

Example usage

Configuration

Contributors

License

parcel-plugin-markdown-string's People

Contributors

Stargazers

Watchers

Forkers

parcel-plugin-markdown-string's Issues

Other Branches

Open

Detected dependencies

Recommend Projects

Recommend Topics

Recommend Org