An extension pack to make interactive markdown editors using CodeMirror 6. https://ixora.karawale.in
  • TypeScript 77%
  • SCSS 9.2%
  • Nunjucks 6.6%
  • JavaScript 5.1%
  • CSS 1.6%
  • Other 0.5%
Find a file
Pranav Karawale 82ea75f0e3
Some checks failed
ci/woodpecker/push/website Pipeline was successful
ci/woodpecker/push/ci Pipeline failed
Fix readme logo
2023-05-10 19:04:46 +05:30
.changeset Switch to a monorepo structure with turborepo 2023-04-30 23:49:53 +05:30
.woodpecker Fix CI (not fixed) 2023-05-03 20:35:58 +05:30
apps/docs Fix CI 2023-05-01 22:18:22 +05:30
packages/ixora Fix readme logo 2023-05-10 19:04:46 +05:30
.eslintrc.yml Initial Commit 2022-03-24 23:29:14 +05:30
.gitignore Switch to a monorepo structure with turborepo 2023-04-30 23:49:53 +05:30
.prettierrc.yml Use tabs 2022-06-29 17:53:56 +00:00
package.json Fix CI (not fixed) 2023-05-03 20:35:58 +05:30
pnpm-lock.yaml Fix CI 2023-05-01 22:18:22 +05:30
pnpm-workspace.yaml Switch to a monorepo structure with turborepo 2023-04-30 23:49:53 +05:30
README.md Switch to a monorepo structure with turborepo 2023-04-30 23:49:53 +05:30
turbo.json Switch to a monorepo structure with turborepo 2023-04-30 23:49:53 +05:30

Ixora logo

Ixora

CI build npm version

WARNING: Ixora is under heavy development, but is quite usable.

Ixora is a CodeMirror 6 extension pack to make writing Markdown fun and beautiful.

This library includes:

  • Proper heading font sizes
  • Hidden decoration marks (*italic* -> italic but style is preserved)
  • Auto link detection
  • Support for ID links (eg. [Foo bar](#foo-bar))
  • YAML frontmatter support
  • Styling for lots of Markdown elements
  • Lots more?

Installation

  1. Install the @retronav/ixora package using the package manager of your choice.

  2. Import the extensions you need

    import { headings, codeblock, list } from '@retronav/ixora';
    

    Or import all of them at once

    import ixora from '@retronav/ixora';
    
  3. Add them in the extensions parameter of your CodeMirror editor creation function.

    const editor = new EditorView({
    	state: EditorState.create({
    		extensions: [
    			// If you import all at once
    			ixora,
    
    			// ...
    
    			// If you import indivivually
    			headings(),
    			codeblock(),
    			lists()
    
    			// ...
    		]
    	})
    });
    

Check test/util.ts for an example of how to use Ixora with CodeMirror.

Additional information

License

The source code is licensed under the Apache License 2.0.

The artwork is licensed under CC BY 4.0.

The logo of this project is derived from the Markdown Mark by Dustin Curtis. The logo uses the color #FF2400 (scarlet). Instead of the arrow pointing downward, there is an ixora flower beside the "M" which can be thought of as an arrow pointing upward.