Skip to content

imfenghuang/obsidian-magic-move

Repository files navigation

Obisdian Magic Move

Obsidian Magic Move is a Obsidian (https://obsidian.md) plugin for animating code blocks. It based on shiki-magic-move.

OMM Gif

Install

Method 1:

  1. Open Settings > community plugins
  2. Turn off Safe mode
  3. Click Browse button to browse plugins and search for Magic Move, or open this link obsidian://show-plugin?id=magic-move in your browser
  4. Click Install button
  5. After installed, go back community plugins window, and activate the newly installed plugin below installed plugins list

Method 2:

  1. Download the latest release
  2. Extract obsidian-magic-move folder from the zip to your vault's plugins folder <vault>/.obsidian/plugins/ (Note: .obsidian folder may be hidden, you need to show it firstly)
  3. Open Settings > community plugins, reload and activate the plugin below installed plugins list

Usage

  • working in Reading Mode
  • use ````magic-move to wrap multiple code blocks
  • code block syntax is the same as you know
  • support code highlighting
````magic-move
```vue
import { defineComponent } from 'vue'

export default defineComponent({
  data: () => ({
    count: 1
  }),
  computed: {
    double() {
      return this.count * 2
    }
  },
})
```
```vue
import { ref, computed } from 'vue'

const count = ref(1)
const double = computed(() => count.value * 2)
```
````

Settings

You can set the duration, stagger, lineNumbers animation option and select any theme you like in the settings tab. All settings are effective immediately.

settings

TODO

  • mix Magic Move with line highlighting
  • living preview