https://github.com/jill64/exmarkdown-code-utility

❏ Code utility plugin for svelte-exmarkdown
https://github.com/jill64/exmarkdown-code-utility

code markdown plugin svelte

Last synced: 2 months ago
JSON representation

❏ Code utility plugin for svelte-exmarkdown

• Host: GitHub
• URL: https://github.com/jill64/exmarkdown-code-utility
• Owner: jill64
• License: mit
• Created: 2023-09-10T06:42:33.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-04-13T01:16:02.000Z (10 months ago)
• Last Synced: 2024-04-13T21:56:03.653Z (10 months ago)
• Topics: code, markdown, plugin, svelte
• Language: TypeScript
• Homepage: https://exmarkdown-code-utility.jill64.dev
• Size: 1.59 MB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


# exmarkdown-code-utility

     

❏ Code utility plugin for svelte-exmarkdown

## [Demo](https://exmarkdown-code-utility.jill64.dev)

This plugin adds the following utility to code section in [svelte-exmarkdown](https://github.com/ssssota/svelte-exmarkdown)

- Code Copy Button

- Show Filename

- Code Highlighting by [svelte-highlight](https://github.com/metonym/svelte-highlight)

## Installation

```bash

npm i exmarkdown-code-utility

```

## Example

```svelte

  import { codeUtility } from 'exmarkdown-code-utility'

  import { Markdown } from 'svelte-exmarkdown'

  .exmarkdown-code-filename {

    /* Style of Filename section (<div/>) */

  }

```

[Full Plugin Options](./src/lib/types/Options.ts)

This will result in the following conversions

Markdown

````md

```html:filename

```

````

↓

HTML

```html

filename



  ❏

  

    

      

    

  



```


## Code Highlighting

This plugin uses [svelte-highlight](https://github.com/metonym/svelte-highlight) for code highlighting.

### Usage

1. Enable the `highlight` option

```svelte

  import { Markdown } from 'svelte-exmarkdown'

  import { codeUtility } from 'exmarkdown-code-utility'

```

2. Import the stylesheet

> [!TIP]

> See [svelte-highlight/styling](https://github.com/metonym/svelte-highlight?tab=readme-ov-file#styling) for details.

```svelte

  import 'exmarkdown-code-utility/styles/github.css'

```

or

```svelte

  import github from 'exmarkdown-code-utility/styles/github'

  {@html github}

```

> [!CAUTION] > [`@html` is dangerous](https://svelte.dev/docs/special-tags#html).  

> If you need to switch dynamic styles, use of [svelte-highlight-switcher](https://github.com/jill64/svelte-highlight-switcher#readme) is recommended to prevent unexpected accidents.

## Migration from v2

Now internal using to [svelte-code-copy](https://github.com/jill64/svelte-code-copy#readme) for code copy button.

- `onCopy` option has been merged into `codeCopy`.

- `codeButton` option has been merged into `copy`.

- Omit styling by `exmarkdown-code-copy`. Use instead `codeCopy` option.

## License

[MIT](LICENSE)