marked-code-format
A marked extension for formatting code blocks using Prettier.
Install
You can install marked-code-format using npm or yarn:
npm i marked-code-format
# or
yarn add marked-code-formatNote: Be sure to install the prettier package as well.
Usage
Once you've installed this extension, you can use it in your marked configuration. Here's an example of how to configure it:
Browser
Say we have the following file example.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Marked code format extension</title>
</head>
<body>
<div id="content"></div>
<script src="https://unpkg.com/prettier@3.0.3/standalone.js"></script>
<script src="https://unpkg.com/prettier@3.0.3/plugins/graphql.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moo/moo.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/json-loose/dist/index.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/attributes-parser/dist/index.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked-code-format/dist/index.umd.min.js"></script>
<script>
;(async () => {
const md = `# Example
\`\`\`graphql prettier
query Hero($episode: Episode, $withFriends: Boolean!) {
hero(episode: $episode) { name friends @include(if: $withFriends) { name } }
}
\`\`\`
`
document.getElementById('content').innerHTML = await new marked.Marked({
async: true
})
.use(markedCodeFormat({ plugins: prettierPlugins }))
.parse(md)
})()
</script>
</body>
</html>
Node.js
Say we have the following file example.md:
# Example
```graphql prettier
query Hero($episode: Episode, $withFriends: Boolean!) {
hero(episode: $episode) {
name
friends @include(if: $withFriends) {
name
}
}
}
```🚨 Important: The prettier attribute must be specified in code fence blocks for formatting the code.
And our module example.js looks as follows:
import { readFileSync } from 'node:fs'
import { Marked } from 'marked'
import markedCodeFormat from 'marked-code-format'
const html = new Marked()
.use(
markedCodeFormat({
/* Prettier options */
})
)
.parse(readFileSync('example.md', 'utf8'))
console.log(html)Now, running node example.js yields:
<h1>Example</h1>
```html
<div>
<p>Greetings, traveler! Sign up today!</p>
</div>
```Inline Options
Prettier configuration can be specified in code fence blocks using the prettier attribute, it has a higher priority than extension Options. For example:
```ts prettier="{ parser: 'typescript' }"
// your code here
```Related
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-changelogNow 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 czLicense
A project by Stilearning © 2023.