Vuepress İçerisinde Markdown Kullanımı

Başlıkların Gösterimi (Title of Content)

Başlıkların gösterimini, namı diğer sayfa içeriğinin özetlenmesini [[toc]]komutuyla yaptırabiliyoruz. Sayfada içeriğin hızlı erişim olarak yer almasını istediğimiz yere yazmamız yeterli. Sonuç:

• Başlıkların Gösterimi (Title of Content)
  • v-pre ile Paketleme
  • Kod bloğu Gömme
• Using Vue in Markdown
  • Template Syntax
  • Components
• Varlıklar (Assets)
  • Relative URLs
  • Public Files

v-pre ile Paketleme

<!-- This will be kept as is by default -->
1 + 2 + 3 = {{ 1 + 2 + 3 }}

<!-- This will be compiled by Vue -->
1 + 2 + 3 = 6

// This won't be compiled correctly because of js syntax highlighting
const onePlusTwoPlusThree = {{ 1 + 2 + 3 }}

Kod bloğu Gömme

You can import code blocks from files with following syntax:

<!-- minimal syntax -->
@[code](../foo.js)

If you want to partially import the file:

<!-- partial import, from line 1 to line 10 -->
@[code{1-10}](../foo.js)

The code language is inferred from the file extension, while it is recommended to specify it explicitly:

<!-- specify the code language -->
@[code js](../foo.js)

In fact, the second part inside the [] will be treated as the mark of the code fence, so it supports all the syntax mentioned in the above Code Blocks section:

<!-- line highlighting -->
@[code js{2,4-5}](../foo.js)

Here is a complex example:

• import line 3 to line 10 of the '../foo.js' file
• specify the language as 'js'
• highlight line 3 of the imported code, i.e. line 5 of the '../foo.js' file
• disable line numbers

@[code{3-10} js{3}:no-line-numbers](../foo.js)

Using Vue in Markdown

This section will introduce some basic usage of Vue in Markdown.

Check out Cookbook > Markdown and Vue SFC for more details.

Template Syntax

As we know:

• HTML is allowed in Markdown.
• Vue template syntax is compatible with HTML.

That means, Vue template syntax

is allowed in Markdown.

Input

One plus one equals: {{ 1 + 1 }}

<span v-for="i in 3"> span: {{ i }} </span>

Output

One plus one equals: 2

span: 1 span: 2 span: 3

Components

You can use Vue components directly in Markdown.

Input

This is default theme built-in `<Badge />` component <Badge text="demo" />

Varlıklar (Assets)

Relative URLs

You can reference any assets using relative URLs in your Markdown content:

![An image](./image.png)

Public Files

You can put some static assets inside public directory, and they will be copied to the root of the generated directory.

The default public directory is .vuepress/public, which can be changed by public option.

It would be useful in some cases:

• You may need to provide static assets that are not directly referenced in any of your Markdown files, for example, favicon and PWA icons.
• You may need to serve some shared static assets, which may even be referenced outside your site, for example, logo images.
• You may want to reference images using absolute URLs in your Markdown content.

Take our documentation source files as an example, we are putting the logo of VuePress inside the public directory:

└─ docs
   ├─ .vuepress
   |  └─ public
   |     └─ images
   |        └─ bird.jpg  # <- target image file
   └─ guide
      └─ assets.md       # <- Here we are

We can reference our logo in current page like this:

Input

![Güzel bir kuş](/images/bird.jpg)

Output