Markdown + Svelte = MDsveX

Markdown + Svelte = MDsveX

TIMESTAMPS

• 0:00 Setup
• 0:43 What is it?
• 1:45 Layouts
• 3:37 Why would you want this?
• 4:32 Putting Svelte in Markdown

This is much cooler than I originally thought… Markdown, Layouts and Svelte, oh my!
Perfect for content creators who want to sprinkle their content with Svelte awesomeness.

https://mdsvex.com/
Svelte-Adders: https://github.com/svelte-add/svelte-adders

#svelte #markdown

What is GEEK

Buddha Community

Markdown + Svelte = MDsveX

Markdown + Svelte = MDsveX

TIMESTAMPS

• 0:00 Setup
• 0:43 What is it?
• 1:45 Layouts
• 3:37 Why would you want this?
• 4:32 Putting Svelte in Markdown

This is much cooler than I originally thought… Markdown, Layouts and Svelte, oh my!
Perfect for content creators who want to sprinkle their content with Svelte awesomeness.

https://mdsvex.com/
Svelte-Adders: https://github.com/svelte-add/svelte-adders

#svelte #markdown

Leaf-markdown: Markdown Renderer for Vapor

Leaf Markdown

A Markdown renderer for Vapor and Leaf. This uses the Vapor Markdown package to wrap cmark (though a fork is used to make it work with Swift PM), so it understands Common Mark. A quick reference guide for Common Mark can be found here. It also supports Github Flavored Markdown.

Usage

Once set up, you can use it in your Leaf template files like any other tag:

#markdown(myMarkdown)

Where you have passed myMarkdown into the view as something like:

# Hey #

Check out my *awesome* markdown! It is easy to use in `tags`

Setup

Add as dependency

Add Leaf Markdown as a dependency in your Package.swift file:

    dependencies: [
        ...,
        .package(name: "LeafMarkdown", url: "https://github.com/vapor-community/leaf-markdown.git", .upToNextMajor(from: "3.0.0")),
    ]

Then add the dependency to your target:

.target(
    name: "App",
    dependencies: [
        // ...
        "LeafMarkdown"
    ],
    // ...
)

Register with Leaf

Register the tag with Leaf so Leaf knows about it:

app.leaf.tags["markdown"] = Markdown()

Don't forget to import LeafMarkdown in the file you register the tag with import LeafMarkdown.

Download Details:

Author: Vapor-community
Source Code: https://github.com/vapor-community/leaf-markdown 
License: MIT license

#swift #vapor #provider #markdown 

Svelte Tutorial - Create a Svelte Project

In this Svelte tutorial we’ll be taking a look at creating a Svelte project using the Svelte template. We’ll go over the file structure, install a VS Code extension and look at starting the built-in development server.

For your reference, check this out:
https://svelte.dev/tutorial/basics

#svelte #web-development #svelte

Mdsvex: A Markdown Preprocessor for Svelte

mdsvex

A Markdown preprocessor for Svelte. Markdown in Svelte.

Packages

This is a monorepo containing mdsvex and any supporting packages. Each repo has it's own readme with more details.

• site - The documentation website.
• mdsvex - mdsvex itself.
• svelte-parse - Generate a svast AST from a Svelte components.
• svast - An AST specification with accompanying TypeScript definitions.
• svast-stringify - Turn a svast AST into a Svelte component.
• svast-utils - Utilities for working with a svast tree.

Contributing

Contributions are welcome. This repo uses changesets to manage changelogs and versioning. All pull requests need an accompanying changeset file (PRs to the documentation website do not need a changeset file). If you know how changesets work then feel free to add one with the appropriate packages, versions and a description of the change. If you don't know how changesets work, don't worry about it, I am happy to add one (a little robot will also add some details to the PR when you open it as well, if you want to learn more).

Download Details:
Author: 
Source Code: 
License:

#svelte #javascript

Using mdsvex with SvelteKit (Markdown + Svelte!)

Markdown is nearly ubiqitous when it comes to blogging. Many applications use it for nicely editable files. With the mdsvex library, you can easily use markdown files that are also able to render out svelte components! It’s the best of both worlds, and can make nearly any blog way more interactive.

⏱️ Timestamps:

• 00:00 - Introduction
• 01:00 - Bug fixes
• 02:00 - Demo + Setup (package.json, svelte.config.js)
• 04:10 - mdsvex layout and examples
• 08:55 - list of blog posts and endpoint

Subscribe: https://www.youtube.com/c/DavidParkerW/featured

#sveltekit #svelte