Nue.js Markdown Extensions: An HTML Perspective Tutorial

Table of Contents

1. Introduction
2. Basic Syntax and Tag Usage (HTML Perspective)
3. Exploring Built-in Markdown Extensions
4. Conclusion

Introduction

Nue.js is a new web framework built on the idea of putting content first. It lets you build sites mainly using Markdown.

Nue.js adds extensions to normal Markdown to make it more powerful—it's like Markdown on steroids. This way, you can add things like buttons, images, galleries, videos, and layout blocks directly in your Markdown.

Even though Nue.js is relatively new to the market, it's getting a lot of attention.

In this article, we will learn how to use the Nue.js Markdown extensions from an HTML perspective.

Basic Syntax and Tag Usage (HTML Perspective)

Nue.js Markdown extensions work just like normal HTML tags, only that here we use square brackets rather than angle brackets.

Lets see some common characteristics to help you get familiar.

Tag Structure = Like HTML Tags

in HTML you would write

<img src="/path/to/image.png" />

in Nue.js Markdown this translates to:

[image src="/path/to/image.png"]

Options = Like HTML Attributes (Plus More!)

Nue.js markdown tags accept attributes just like HTML. The following is the HTML code for a link.

<a href="/about" class="btn primary">Learn More</a>

it would translate into the following Nue.js markdown

[button label="Learn More" href="/about" class="btn primary"]

you can also use the YAML block option:

[button]
  label: Learn More
  href: /about
  class: btn primary

It's just the same thing. Just use what feels natural to you.

Nested Content = Like InnerHTML or Child Elements

With that simple introduction, we will dive into how to code some of the most common elements.

Exploring Built-in Markdown Extensions

Images

Images are important for user engagement and enhancing the visual appeal of a website. Adding images to Nue.js Markdown is just like adding images in HTML. Let's go through common scenarios.

Basic image

In HTML, you would write:

<img src="/images/photo.jpg" />

In Nue.js Markdown, you simply write:

[image src="/images/photo.jpg" ]

It’s that simple—just specify the image path inside the square brackets.

Adding Alt Text to image

Alt text is essential for accessibility and SEO. In HTML, it’s added like this:

html
CopyEdit
<img src="/images/photo.jpg" alt="Mountain view" />

Alt text is essential for accessibility and SEO. In HTML, it’s added like this:

[image src="/images/photo.jpg" alt="Mountain view"]

Adding Class, ID, and Width

Just like in HTML, you can add attributes like class, id, and even define custom sizing for your image.

[image src="/images/photo.jpg" alt="A view" class="rounded shadow" id=hero width="400px"]

You can proceed to add the other image attributes. Practice!

✨ Pro Tip: Practice Makes Perfect!

To master adding images and fine-tuning them with attributes, keep practicing! Try adding different combinations of image attributes to get a feel for the flexibility Nue.js offers.

Let's move on to videos.

Videos

Just like images videos are a powerful way to engage users. in Nue.js adding videos is straightforward and similar to how you would handle it in HTML.

Basic Video Tag

In HTML, you would embed a video like this:

<video src="/videos/sample.mp4" controls></video>

In Nue.js, the syntax is equally simple:

[video /videos/sample.mp4 controls]

This embeds the video, and the controls attribute ensures the user can play, pause, and control volume.

Adding Width, Height, and Other Options

[video /videos/sample.mp4 controls width="500" height="300"]

This allows you to control the size of your video directly from your Markdown file.

Adding Title and Autoplay

<video src="/videos/sample.mp4" autoplay title="Beach Sunset" controls></video>

Now your video will start playing automatically and display the specified title.

Buttons

Buttons are interactive elements that help users perform certain actions on your site. Nue.js markdown makes the process simple. and intuitive. It's important to note that buttons act as links too in Nue.js markdown.

Basic Button

In HTML, you would create a button like this:

<button onclick="location.href='/home'">Go to Home</button>

In Nue.js, the syntax is even simpler:

[button label="Go to Home" href="/home"]

This creates a button that, when clicked, takes the user to the specified href (link).

Adding Classes and IDs

Just like in HTML, you can assign classes and IDs to buttons for styling and targeting in JavaScript.

[button label="Go Home" href="/home" class="btn-primary" id="home-button"]

Using Button with Icons

You can also add icons inside buttons to enhance their look. For example, you could use a Font Awesome icon inside the button.

[button text="Home" href="/" class="fa fa-home"]

Lists

Lists are fundamental blocks for they help to represent grouped data. In Nue.js markdown, you can create both ordered and unordered lists easily.

Unordered (Bulleted) List

in HTML we define an ordered list as:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

This can be rewritten as follows in Nee.js markdown:

- Item 1
- Item 2
- Item 3

Ordered (Numbered) List

In Nue.js, you create an ordered list like this:

1. Step 1
2. Step 2
3. Step 3  

Description lists

Description lists are perfect for defining terms and their descriptions. They are used when you need to display a list of items with explanations or definitions.

here is how you would define them:

[define]
  ## HTML
  Hypertext Markup Language (HTML) is the standard language for documents designed to be displayed in a web browser.
  ## CSS
  Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in HTML or XML.
  ## JavaScript
  JavaScript is a programming language commonly used in web development to create interactive effects within web browsers.
[/define]

Tables

Tables are a great way to display data in a structured format. With Nue.js, creating tables within your Markdown is simple and easy. Here’s how you can define tables using the Markdown extensions in Nue.js.

Here is how we would represent a table in Nue.js markdown:

[table]
  | Header 1 | Header 2 | Header 3 |
  |----------|----------|----------|
  | Row 1, Column 1 | Row 1, Column 2 | Row 1, Column 3 |
  | Row 2, Column 1 | Row 2, Column 2 | Row 2, Column 3 |
  | Row 3, Column 1 | Row 3, Column 2 | Row 3, Column 3 |
[/table]

Accordions

Accordions are a great way to organize content, allowing users to toggle between different sections of content. In Nue.js, creating an accordion is simple, and you can easily add interactive collapsible sections to your site. Let's dive into how to implement accordions using the Markdown extensions in Nue.js.

Basic Accordion Example

[accordion]
  ## First Element
  The contents of the first element
  ## Second Element
  The contents of the second element
  ## Third Element
  The contents of the third element

How it works:

• The [accordion] tag wraps all the sections of the accordion.
• Each section within the accordion is denoted using ## followed by the title of the section, and the content beneath it.
• When the user clicks on the title (e.g., "First Element"), the content of that section will be revealed. Other sections will collapse.

Footnotes

Nue.js allows for a more structured and readable way of handling footnotes using the [define] tag. Instead of using the standard [^label]: syntax for each footnote, you can define your footnotes at the beginning of your content and then reference them throughout the document. This approach makes your content cleaner and more organized, especially in large articles or documents.

Basic Footnote Syntax

[define]
  ## Separation of concerns { #soc }
  A strategy for clean and maintainable code
  ## Progressive Enhancement { #pe }
  Setup core functionality first and enhance it later
  ## Form follows function { #fff }
  Make styling follow your content

Conclusion

In this article, we have explored the power of Nue.js Markdown extensions. We have seen how we can apply them to create common HTML tags. It creates a more neat and cleaner approach to HTML. With the advent of Nue.js, this might very well be the new way to write front-end code.