v0.48.0
💡 Highlights
Slidev v0.48.0 is one of the biggest changes and improvements released since it launched. Huge thanks to our new team member @KermanX, who pushed a lot of aspects of Slidev and made a lot of cool new features.
🎩 Shiki Magic Move
Shiki Magic Move allows you to do morphing animation between codes, making it smoother to compare code changes in your slides
Screen.Recording.2024-03-10.at.15.53.03.mov
Learn more at https://sli.dev/guide/syntax#shiki-magic-move
✍️ v-mark
Rough Notation
We also integrated Rough Notation to Slidev, making it easier to highlight and notation sections you might want to emphasize.
Screen.Recording.2024-02-24.at.17.29.05.mov
Learn more at https://sli.dev/guide/animations#rough-markers
🧑💻 Runable Monaco Editor
Monaco Editor integrations get refreshed! It is much more performant and robust. In addition, we also introduced the Runnable Monaco that you can edit and execute the code in your slide:
Screen.Recording.2024-03-07.at.23.11.59.mov
Learn more at https://sli.dev/guide/syntax#monaco-editor
📋 New Overview View
We introduced a new /overview
screen for you to review all your slides and notes together:
Screen.Recording.2024-03-08.at.00.45.53.mov
Learn more at https://sli.dev/guide/overview
👆 Clicks Sliders
We introduced the click sliders in both the Overview
and Presenter
views so that you can quickly see the clicks you have for each slide by dragging them to preview each click.
Screen.Recording.2024-03-10.at.15.24.37.mov
📝 Notes Markers
To make your notes (that might be long) in sync with the progress of your presentation, we introduced that [click]
marker to separate your notes into sections so you can follow your notes more easily as you go forward:
Screen.Recording.2024-03-10.at.15.37.23.mov
Learn more at https://sli.dev/guide/syntax#click-markers
🔍 Slide Zooming
You can now have a zooming option for each slide via frontmatter to resize the canvas:
---
zoom: 1.5
---
Your content
Learn more at #1322
🚨 Breaking Changes
Click System Rework
See #1279. This would give the v-click
system a much more reliable behavior and better API to work with. It shouldn't affect most usages unless you are using programmatic conditional heavily — try going through your slides after the upgrade to make sure. You should be good to go!
Monaco Editor Rework
See #1330. At the very beginning, Slidev integrated Monaco Editor in an iframe because of the limitation of hover positioning with scaled slides. @KermanX took a deep look and figured out a solid way to make Monaco aware of the current scaling of the slide. Now, Monaco Editors will directly render in the DOM without iframe - this gives us a much more efficient and robust Monaco experience.
Meanwhile, since this approach makes Monaco components, if you don't use Monaco, it will not ship into your production bundle, and you don't need to turn Monaco on and off anymore explicitly. In that case, Monaco support is on by default for both dev and build now.
We also have a new runnable Monaco Editor that can serve as REPL in your presentation, check the docs for more.
Internal Refactorings
If you are using direct import from @slidev/client/**
, those might break because we took a huge internal refactor to make the code base future-proof. We suggest you import from @slidev/client
(new in v0.48) to use only the public API:
<script setup>
import { useDarkMode, useNav, useSlidevContext } from '@slidev/client'
const { $slidev } = useSlidevContext()
const { currentSlideRoute } = useNav()
const { isDark } = useDarkMode()
// ...
</script>
See https://sli.dev/custom/vue-context#composable-usage
🗺️ Future Plans
We created a few RFC (Request for Comments) issues to address the plans we have for the future:
The major one is that we have a long-term plan to migrate Slidev to use Nuxt as the underlying framework. It would allow us to have built-in server support for production, as well as reusing the rich ecosystem Nuxt has (like installing a module, etc).
Check them out if you are interested. We look forward to hearing from you! Thank you and hope you enjoy Slidev!
Generated changelogs
🚨 Breaking Changes
- Rework the clicks system - by @KermanX and @antfu in #1279 (b8144)
- Rework Monaco editor integeration - by @KermanX and @antfu in #1330 (26f6c)
- Separating nav.ts for better scoping - by @antfu and @KermanX in #1365 (697ad)
🚀 Features
- Basic support for notes and make cover dynamic - by @antfu (cd6b6)
- Update - by @antfu (ed72a)
- Prod build tree shaking - by @antfu (43e75)
- Cli allowDownload - by @antfu (dc187)
- Support custom download url for build - by @antfu (0e17f)
- Update layouts - by @antfu (86c1a)
- Preload slides - by @antfu (e99af)
- Enhanced v-click usage - by @antfu (9c727)
- Enhance v-clicks component - by @antfu (7051f)
- Suppprt monaco identifier with space - by @antfu (e2779)
- Animations for code highlights - by @antfu (36918)
- New domain - by @antfu (ebce2)
- Element transitions - by @antfu (c1c43)
- Support latex, close #16 - by @antfu in #16 (35753)
- Add slide page selector for custom styling - by @antfu (18c3e)
- Embedded styles in markdown - by @antfu (f7a86)
- Mermaid diagrams support - by @antfu in #71 (0dee4)
- Allow user to force colorSchema in frontmatter - by @antfu (2c410)
- Options to disable slide preload, close #102 - by @antfu in #102 (2ee73)
- Custom setup for mermaid and katex, close #79, close #82 - by @antfu in #79 and #82 (99f80)
- Add a few tweets for reference - by @antfu (da3b6)
- Add fr entry - by @antfu (44fbd)
- Add Español entries - by @antfu (14f75)
- Ru docs - by @antfu (01079)
- Link to discord - by @antfu (0ef8d)
- Setup search, close #8 - by @antfu in #8 (deeb6)
- Showcase talk from @LinusBorg - by @antfu (ee363)
- Export clicks - by @antfu (ca2fc)
- Update theme gallery - by @antfu (33596)
- Update translations - by @antfu (9ed9a)
- Add translations entries - by @antfu (7fcdf)
- Setup starter template - by @antfu (983a2)
- Add online link - by @antfu (af65a)
- Add TOC documentation - by @tonai in #49 (06ae2)
- Add ja trans - by @antfu (d99eb)
- Update install.md to fix the missed docker part - by @tangramor in #57 (e9ccc)
- Add doc for Titles and Link components - by @tonai in #64 (0daa3)
- Update config doc - by @tonai in #65 (37797)
- Add doc for CLI commands - by @tonai in #67 (87e46)
- Addons doc - by @tonai in #71 (18216)
- Migration message and examples for the new setupShortcuts - by @twitwi in #90 (2b464)
- Add LightOrDark component doc - by @tonai in #106 (2236d)
- Add presenter mode documentation - by @tonai in #105 (9477d)
- Page transition - by @antfu (2e53e)
- Add built-in components doc and add buil-in menu - by @tonai in #116 (b66a4)
- Configuring UnoCSS - by @antfu (19d3a)
- Add built-in layout
two-cols-header
- by @btea in #135 (e83fc) - Update docs - by @antfu (d45ed)
- Add
$page
and$renderContext
context - by @antfu (234e7) - View transitions - by @Jannchie in https://github.com/slidevjs/slidev/issues/141 (6e0af)
- Add slidev-theme-frankfurt to themes.ts - by @MuTsunTsai in #152 (32ffb)
- Add notice to the custom clicks count when using the at directive - by @John98Zakaria in #160 (7df76)
- Migrate to latest VitePress - by @antfu (094f9)
- Display error message from Mermaid - by @KermanX in #1289 (4f6f5)
- Use
untun
instead oflocaltunnel
- by @KermanX and @antfu in #1225 and #1286 (d6bb5) - Vertical editor layout and title for icon buttons - by @KermanX in #1294 (fccf9)
- Inject HTML meta tags - by @KermanX in #1301 (e4f8a)
- Add
--bind
option - by @KermanX in #1302 (d23d5) - Better drawing utils - by @KermanX in #1319 (11009)
- Add
zoom
option in page frontmatter - by @KermanX in #1322 (faef3) - Introduce
useSlidevContext
, refactor injections - by @antfu (3e55a) - New render context
none
for out side of slides - by @antfu (10eb1) - Support
v-mark
powered by Rough Notation - by @antfu in #1331 (61d3f) - Introduce list overview - by @antfu (66702)
- Allow edit from list overview - by @antfu (6809e)
- Show title in list overview - by @antfu (5206e)
- Support
forward:
andbackward:
variant in UnoCSS for direction-based styling - by @antfu (cf80a) - Show counts in list overview - by @antfu (c543d)
- Improve list overview note editing - by @antfu (37440)
- Add clicks slider in list overview - by @antfu (44dde)
- Improve slider style - by @antfu (284c3)
- Support clicks in notes - by @antfu in #1334 (f9818)
- Improve note clicks experience - by @antfu (87c56)
- Add open in editor button in list overview - by @antfu (655c6)
- Shiki magic move integration - by @antfu in #1336 (29a61)
- Scroll the note marker to the center automatically - by @antfu (c5a5f)
- Improve note markers in overview - by @antfu (4b2f4)
- Allow preparsers to access the run mode (dev,export,build) - by @twitwi in #1337 (f5d80)
- Improve chunk spliting - by @antfu (2d035)
- Show clicks slider in presenter mode - by @antfu (5e503)
- Try fix vite deps optimization - by @antfu (76ae9)
- Enable slides formatting - by @antfu (f1622)
- Make
slideAspect
andslideWidth
ref, resolve #1366 - by @antfu in #1366 (a3fdf) - Allow different languages in shiki magic move - by @antfu (e18cd)
- Support highlight within magic move - by @antfu (68ed6)
- Docs for
v-mark
- by @antfu (ff88e) - Update showcase ui - by @antfu (e468a)
- Add runnable monaco editor - by @KermanX and @antfu in #219 and #1273 (8549e)
- Add a guide to enabling chemical equations - by @John98Zakaria in #1400 (1bd92)
- Support importing directly from
@slidev/client
- by @antfu (6ece4) - client: Introduce the public API file - by @antfu (fd439)
🐞 Bug Fixes
- Docs - by @antfu (4fd47)
- Update tweet components - by @antfu (a93f8)
- Dead link - by @antfu (077a8)
- Export pages range - by @antfu (8da8c)
- Monaco build with custom outDir - by @antfu (38c07)
- Youtube video size - by @antfu (953ee)
- Theme link - by @0xflotus in #12 (5ac62)
- Build warning - by @antfu (5d277)
- Broken links - by @chengpeiquan in #50 (ce73d)
- Correct typo in the name of the generated pdf - by @twitwi in #62 (9fa68)
- Update links - by @antfu (6cf71)
- Remove work in progress note - by @antfu (eca01)
- Dark mode switch - by @leonardssh in https://github.com/slidevjs/slidev/issues/86 (e3853)
- Disable search box auto open, close #99 - by @antfu in #99 (eb148)
- Use bold instead of code tag to avoid breaking chars on mobile - by @jdbruxelles in #100 (5cffe)
- Replace commas with underscores in atomic-css - by @matttrice in #122 (6a80c)
- IPA correction - by @alephpi in #127 (281e1)
- FAQ page UnoCSS url - by @fakelbst in #129 (c608c)
- The third parameter of userIntervalFn is wrong - by @btea in #136 (a6243)
- Remove extra space for props to be parsed correctly - by @John98Zakaria in #159 (9b64c)
- Components not found - by @KermanX in #165 and #167 (2ff45)
codemirror
import error, again - by @KermanX in #1290 (315f4)- Double scroll bars in CodeMirror editor - by @KermanX in #1291 (ccc3e)
- Next operation - by @KermanX in #1251 and #1295 (66a7c)
<v-clicks/>
wrapping - by @antfu (aa0ca)- Warning about
defineProps
- by @KermanX in #1300 (6b633) - Save external slide - by @KermanX in #1111 and #1299 (f395b)
- Fix Vue production mode breaking PDF Export - by @ev45ive in #1245 and #1247 (fd4d2)
defineEmits
caused warnings - by @KermanX in #1306 (28863)- Nested multiple-entry slides - by @KermanX in #1305 (c4040)
- Filter frontmatter - by @KermanX in #1303 and #1312 (f8f7e)
- Update template in CLI - by @KermanX in #1313 (8f105)
hide
option in frontmatter - by @KermanX in #1314 (2aba0)- Slide route meta - by @KermanX in #1315 (c6e5c)
VClicks
component - by @KermanX in #1321 (3671d)- Escape
{{
in code - by @KermanX in #1316 and #1317 (900b3) - Multiple Tweet component - by @KermanX in #1309 and #1318 (be807)
- Package and path resolving - by @KermanX in #1308 (b10d4)
- No injection warning - by @antfu (497e5)
- Rename
useSlidevContext
touseSlideContext
, useprovideLocal
everywhere - by @antfu (061a2) - Do not listen to storage changes for UI - by @antfu (d3d49)
- Use string instead of symbol for injections, improve HMR experience - by @antfu (7e539)
- Component not found warnings - by @KermanX in #1326 (ab1b3)
- Slide patching - by @KermanX in #1327 (e05a7)
- Reset CodeMirror history when route changes - by @KermanX in #1328 (0db56)
- Provide scale context for each slide container - by @antfu (0d3b4)
- Get port fallback - by @antfu (188e7)
- Bump rough-notation - by @antfu (6828e)
- List overview preview border - by @antfu (4bedc)
- Properly hide
list overview
button - by @antfu (9490e) - Add target _blank to list overview entry - by @antfu (95eb5)
- How nav direction is calculated - by @antfu (83e9c)
backward:
UnoCSS variant - by @KermanX in #1332 (77c61)- Improve internal types - by @antfu (bd098)
- Slide animations - by @antfu (00085)
- Do not persist the state of showOverview - by @antfu (90115)
- Conditional auto scroll for notes - by @antfu (0b245)
- Ui improvements - by @antfu (8443a)
- Use lz-string to compress and encode magic move steps, close #1338 - by @antfu in #1338 (e1990)
- Importing
lz-string
- by @KermanX in #1343 (d6fd8) - Black background when exporting to PDF - by @kamuiiiii in #1340 (b222b)
CodeBlockWrapper
transform generates incorrectranges
- by @antfu (8f45f)- Remove usage of
useTweetScript
- by @KermanX in #1344 (daa61) Tweet
component - by @KermanX in #1345 (6452c)- Monaco editor types resolution - by @KermanX in #1342 (af6e9)
- Improve chunking - by @antfu (b3766)
- Katex block clicks animation - by @KermanX in #1346 (26730)
- Calcutate editor height on toggling - by @antfu (1a1e8)
- Mermaid rendering error report - by @KermanX in #1347 (a7039)
- Importing
lz-string
- by @KermanX in #1348 (a61e2) - Deps optimization - by @antfu (6ede6)
- Imports in Monaco types - by @KermanX and @antfu in #1350 (5a75e)
- Remove
monacoTypesAdditionalPackages
from demo - by @KermanX in #1352 (6e9ee) - Add missing CodeMirror deps to include list - by @KermanX in #1354 (886bf)
- Double click operation in clicks slider - by @KermanX in #1356 (b56cb)
- Double click operation in clicks slider - by @KermanX in #1359 (0ffc4)
- Hide scroll bar in Shiki magic move - by @KermanX in #1362 (7b99d)
- Make slide routes async, prevent crash on syntax errors - by @KermanX and @antfu in #1357 (bf87a)
- Dynamic slide info index - by @KermanX in #1370 (b7470)
- Circular import in
context.ts
- by @KermanX in #1368 (c917b) - Improve optimize list - by @antfu (71167)
- Support
{at:x}
for magic move - by @antfu (14041) - Landing page style - by @antfu (d90cc)
- View transition in Presenter mode - by @kamuiiiii and @KermanX in #1363 (abf9a)
- Deps optimization, close #1374, close #1375 - by @antfu in #1374 and #1375 (44814)
- Call
monaco.editor.remeasureFonts()
after editor mounted - by @KermanX in #1376 (4b99d) - Types in shim files - by @KermanX in #1377 (f32cc)
- Slide exporter - by @KermanX in #1380 (f4160)
- Slide formatter - by @KermanX in #1379 (ff1ca)
- Id should not contain numbers - by @KermanX in #1378 (48ec6)
- Monaco types loader - by @KermanX in #1383 (63ce1)
- Update cover url - by @antfu (8a2d5)
- Only show overview entry on dev - by @antfu (6db01)
- Retry for loading Tweet - by @antfu (e32ea)
- Turn off server-ref debug mode - by @antfu (94662)
- Clicks missing when going backward - by @antfu (cc27d)
- Auto restart when certain files have changed - by @antfu (a4b4c)
- Overview notes offset - by @antfu (763df)
- HMR API conditinal guard - by @KermanX in #1388 (1ec5c)
- Allow hyphenated languages for magic move, e.g. angular-ts - by @niklas-wortmann and Jan-Niklas Wortmann in #1389 (05196)
findPkgRoot
- by @kamuiiiii in #1396 (65668)- Twoslash query popup position, fix #1349 - by @antfu in #1349 (e0f3f)
- Do not restart on vite config, fix #1398 - by @antfu in #1398 (507ae)
- Refresh CodeMirror editror when size changed - by @KermanX in #1404 (3eb07)
- User root resolver - by @KermanX in #1403 (0d223)
- client: Avoid circular reference - by @antfu (f64e1)
- create-app: Prompts - by @antfu (75d13)
- css: KaTeX gray border - by @antfu (d51b4)