diff --git a/presentation/slidev/slides.md b/presentation/slidev/slides.md index 69cab19..215ccf2 100644 --- a/presentation/slidev/slides.md +++ b/presentation/slidev/slides.md @@ -24,54 +24,27 @@ transition: slide-left mdc: true --- -# Welcome to Slidev +# Compiler ULTIMATE Presentation slides for developers -
- - Press Space for next page - -
- -
- - - - -
- - ---- -transition: fade-out --- -# What is Slidev? +# Parser -Slidev is a slides maker and presenter designed for developers, consist of the following features +Besonderheiten und Änderungen zu Java: -- 📝 **Text-based** - focus on the content with Markdown, and then style them later -- 🎨 **Themable** - themes can be shared and re-used as npm packages -- 🧑‍💻 **Developer Friendly** - code highlighting, live coding with autocompletion -- 🤹 **Interactive** - embed Vue components to enhance your expressions -- 🎥 **Recording** - built-in recording and camera view -- 📤 **Portable** - export to PDF, PPTX, PNGs, or even a hostable SPA -- 🛠 **Hackable** - virtually anything that's possible on a webpage is possible in Slidev -
-
+- Pro Datei nur eine Klasse, mehrer Dateien einlesen +- Keine Accessmodifier +- print statt System.out.println +- i++ eingeschränkt +- Kein ++i +- Zugriff af Felder nur mit this +- Logische Statements Klammern, sonst von links nach rechts +- Recipient +- Fehlermeldungen werden gesammelt -Read more about [Why Slidev?](https://sli.dev/guide/why) - - - --- -transition: slide-up -level: 2 ---- - -# Navigation - -Hover on the bottom-left corner to see the navigation's controls panel, [learn more](https://sli.dev/guide/navigation.html) - -## Keyboard Shortcuts - -| | | -| --- | --- | -| right / space| next animation or slide | -| left / shiftspace | previous animation or slide | -| up | previous slide | -| down | next slide | - - - -

Here!

- ---- -layout: two-cols -layoutClass: gap-16 ---- - -# Table of contents - -You can use the `Toc` component to generate a table of contents for your slides: - -```html - -``` - -The title will be inferred from your slide content, or you can override it with `title` and `level` in your frontmatter. - -::right:: - - - ---- -layout: image-right -image: https://cover.sli.dev ---- - -# Code - -Use code snippets and get the highlighting directly, and even types hover![^1] - -```ts {all|5|7|7-8|10|all} twoslash -// TwoSlash enables TypeScript hover information -// and errors in markdown code blocks -// More at https://shiki.style/packages/twoslash - -import { computed, ref } from 'vue' - -const count = ref(0) -const doubled = computed(() => count.value * 2) - -doubled.value = 2 -``` - - - - -<<< @/snippets/external.ts#snippet - - -[^1]: [Learn More](https://sli.dev/guide/syntax.html#line-highlighting) - - - - - - ---- -level: 2 ---- - -# Shiki Magic Move - -Powered by [shiki-magic-move](https://shiki-magic-move.netlify.app/), Slidev supports animations across multiple code snippets. - -Add multiple code blocks and wrap them with ````md magic-move (four backticks) to enable the magic move. For example: - -````md magic-move {lines: true} -```ts {*|2|*} -// step 1 -const author = reactive({ - name: 'John Doe', - books: [ - 'Vue 2 - Advanced Guide', - 'Vue 3 - Basic Guide', - 'Vue 4 - The Mystery' - ] -}) -``` - -```ts {*|1-2|3-4|3-4,8} -// step 2 -export default { - data() { - return { - author: { - name: 'John Doe', - books: [ - 'Vue 2 - Advanced Guide', - 'Vue 3 - Basic Guide', - 'Vue 4 - The Mystery' - ] - } - } - } -} -``` - -```ts -// step 3 -export default { - data: () => ({ - author: { - name: 'John Doe', - books: [ - 'Vue 2 - Advanced Guide', - 'Vue 3 - Basic Guide', - 'Vue 4 - The Mystery' - ] - } - }) -} -``` - -Non-code blocks are ignored. - -```vue - - -``` -```` - ---- - -# Components - -
-
- -You can use Vue components directly inside your slides. - -We have provided a few built-in components like `` and `` that you can use directly. And adding your custom components is also super easy. - -```html - -``` - - - - -Check out [the guides](https://sli.dev/builtin/components.html) for more. - -
-
- -```html - -``` - - - -
-
- - - ---- -class: px-20 ---- - -# Themes - -Slidev comes with powerful theming support. Themes can provide styles, layouts, components, or even configurations for tools. Switching between themes by just **one edit** in your frontmatter: - -
- -```yaml ---- -theme: default ---- -``` - -```yaml ---- -theme: seriph ---- -``` - - - - - -
- -Read more about [How to use a theme](https://sli.dev/themes/use.html) and -check out the [Awesome Themes Gallery](https://sli.dev/themes/gallery.html). - ---- - -# Clicks Animations - -You can add `v-click` to elements to add a click animation. - -
- -This shows up when you click the slide: - -```html -
This shows up when you click the slide.
-``` - -
- -
- - - -The v-mark directive -also allows you to add -inline marks -, powered by [Rough Notation](https://roughnotation.com/): - -```html -inline markers -``` - - - -
- -[Learn More](https://sli.dev/guide/animations#click-animations) - -
- ---- - -# Motions - -Motion animations are powered by [@vueuse/motion](https://motion.vueuse.org/), triggered by `v-motion` directive. - -```html -
- Slidev -
-``` - -
-
- - - -
- -
- Slidev -
-
- - - - -
- -[Learn More](https://sli.dev/guide/animations.html#motion) - -
- ---- - -# LaTeX - -LaTeX is supported out-of-box powered by [KaTeX](https://katex.org/). - -
- -Inline $\sqrt{3x-1}+(1+x)^2$ - -Block -$$ {1|3|all} -\begin{array}{c} - -\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & -= \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ - -\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ - -\nabla \cdot \vec{\mathbf{B}} & = 0 - -\end{array} -$$ - -
- -[Learn more](https://sli.dev/guide/syntax#latex) - ---- - -# Diagrams - -You can create diagrams / graphs from textual descriptions, directly in your Markdown. - -
- -```mermaid {scale: 0.5, alt: 'A simple sequence diagram'} -sequenceDiagram - Alice->John: Hello John, how are you? - Note over Alice,John: A typical interaction -``` - -```mermaid {theme: 'neutral', scale: 0.8} -graph TD -B[Text] --> C{Decision} -C -->|One| D[Result 1] -C -->|Two| E[Result 2] -``` - -```mermaid -mindmap - root((mindmap)) - Origins - Long history - ::icon(fa fa-book) - Popularisation - British popular psychology author Tony Buzan - Research - On effectiveness
and features - On Automatic creation - Uses - Creative techniques - Strategic planning - Argument mapping - Tools - Pen and paper - Mermaid -``` - -```plantuml {scale: 0.7} -@startuml - -package "Some Group" { - HTTP - [First Component] - [Another Component] -} - -node "Other Groups" { - FTP - [Second Component] - [First Component] --> FTP -} - -cloud { - [Example 1] -} - -database "MySql" { - folder "This is my folder" { - [Folder 3] - } - frame "Foo" { - [Frame 4] - } -} - -[Another Component] --> [Example 1] -[Example 1] --> [Folder 3] -[Folder 3] --> [Frame 4] - -@enduml -``` - -
- -[Learn More](https://sli.dev/guide/syntax.html#diagrams) - ---- -foo: bar -dragPos: - square: 691,32,167,_,-16 ---- - -# Draggable Elements - -Double-click on the draggable elements to edit their positions. - -
- -###### Directive Usage - -```md - -``` - -
- -###### Component Usage - -```md - - - Use the `v-drag` component to have a draggable container! - -``` - - -
- Double-click me! -
-
- - - -###### Draggable Arrow - -```md - -``` - - - ---- -src: ./pages/multiple-entries.md -hide: false ---- - ---- - -# Monaco Editor - -Slidev provides built-in Monaco Editor support. - -Add `{monaco}` to the code block to turn it into an editor: - -```ts {monaco} -import { ref } from 'vue' -import { emptyArray } from './external' - -const arr = ref(emptyArray(10)) -``` - -Use `{monaco-run}` to create an editor that can execute the code directly in the slide: - -```ts {monaco-run} -import { version } from 'vue' -import { emptyArray, sayHello } from './external' - -sayHello() -console.log(`vue ${version}`) -console.log(emptyArray(10).reduce(fib => [...fib, fib.at(-1)! + fib.at(-2)!], [1, 1])) -``` - ---- -layout: center -class: text-center ---- - -# Learn More - -[Documentation](https://sli.dev) · [GitHub](https://github.com/slidevjs/slidev) · [Showcases](https://sli.dev/showcases.html)