Render css based on the markdown format modified by typo.css.
- Author: Charles Chan
- Organization: Corgi Coding
- Github: https://github.com/Corgi-Coding
version 1.0.4: fix li pre style
version 1.0.4: fix li pre style
version 1.0.5: add feat global style
version 1.0.6: remove global style | fix some error
*version 2.0.0: vite build
There are two ways to use it
- Install package
npm install @corgicoding/theme
- Import css file to the page.
import '@corgicoding/theme';- Add the
cc__markdown-themeclass to the dom element to be rendered.
<div class="cc__markdown-theme">
<h1>hello</h1>
<div></div>
</div>- DownLoad this Repository.
- Unzip
- Add the
cc__markdown-themeclass to the dom element to be rendered. - Add the following code to the page.
<!-- Prevent compatibility issues caused by different browsers -->
<link rel="stylesheet" href="./dist/normalize.css" />
<!-- corgicoding.theme -->
<link rel="stylesheet" href="./dist/corgicoding.theme.min.css" />
<!-- github style code render -->
<link rel="stylesheet" href="./dist/github.css" />
<div class="cc__markdown-theme">
<h1>hello</h1>
<div></div>
</div>- header title no counter
<div class="cc__markdown-theme disabled-counter">
<h1>hello</h1>
<div></div>
</div>- dark mode
<html class="dark">
<div class="cc__markdown-theme disabled-counter">
<h1>hello</h1>
<div></div>
</div>
<html></html>
</html>- markdown-it with vue3: https://www.npmjs.com/package/@corgicoding/markdown-render
- markdown editor and preview: https://www.npmjs.com/package/@corgicoding/markdown-vue
import '@corgicoding/theme';
<div class="cc__markdown-theme">
<MarkdownRender v-model="textValue" style="padding: 20px"></MarkdownRender>
</div>