Скопировать код

Меньше 1 минуты

Если вы программист, вы можете захотеть, чтобы ваши пользователи могли копировать код, который вы показываете в тексте, одним щелчком мыши.

Для этого vuepress-theme-hope используйте vuepress-plugin-copy-code2open in new window, чтобы предоставить кнопку копирования на блоках кода.

Инфо

vuepress-theme-hope передает plugins.copyCode в параметрах темы в качестве параметров плагина для vuepress-plugin-copy-code2.

Использование

После включения этот плагин автоматически добавит кнопку копирования в правый нижний угол каждого блока кода.

По умолчанию кнопка отображается только в режиме рабочего стола. Чтобы эта кнопка отображалась на мобильных устройствах, установите для plugins.copyCode.showInMobile значение true в параметрах темы.

После того, как пользователь нажмет кнопку копирования, на экране появится подсказка об успехе. Длительность подсказки по умолчанию составляет 2000 мс, чтобы изменить продолжительность, установите plugins.copyCode.duration в настройках темы. Чтобы отключить подсказку, установите продолжительность на 0.

Эффект

// .vuepress/config.js
import { hopeTheme } from "vuepress-theme-hope";

export default {
  theme: hopeTheme({
    plugins: {
      copyCode: {},
    },
  }),
};