返回 slidev
usePrintStyles.ts
根目录 / packages / client / composables / usePrintStyles.ts
1 import { useStyleTag } from '@vueuse/core'
2 import { computed } from 'vue'
3 import { slideHeight, slideWidth } from '../env'
4 import { useNav } from './useNav'
5
6 export function usePrintStyles() {
7 const { isPrintMode } = useNav()
8
9 useStyleTag(computed(() => isPrintMode.value
10 ? `
11 @page {
12 size: ${slideWidth.value}px ${slideHeight.value}px;
13 margin: 0px;
14 }
15
16 * {
17 transition: none !important;
18 transition-duration: 0s !important;
19 }`
20 : ''))
21 }
22
23 // Monaco uses `<style media="screen" class="monaco-colors">` to apply colors, which will be ignored in print mode.
24 export function patchMonacoColors() {
25 document.querySelectorAll<HTMLStyleElement>('style.monaco-colors').forEach((el) => {
26 el.media = ''
27 })
28 }
29
29 lines TYPESCRIPT