[#]: subject: "Generate web pages from Markdown with Docsify-This"
[#]: via: "https://opensource.com/article/23/5/docsify-markdown-html"
[#]: author: "Paul Hibbitts https://opensource.com/users/paulhibbitts"
[#]: collector: "lkxed"
[#]: translator: " "
[#]: reviewer: " "
[#]: publisher: " "
[#]: url: " "

Generate web pages from Markdown with Docsify-This
======

Are you interested in leveraging Markdown for online content without any website setup or build process? How about seamlessly embedding constraint-free Markdown or HTML into multiple platforms (such as a content management system or learning management system)? The open source project [Docsify-This][1], built with [Docsify.js][2], provides an easy way to publish, share, and reuse Markdown content.

**[ Get the [Markdown cheat sheet][3] ]**

### What is Docsify-This?

With Docsify-This, you can instantly turn any publicly available Markdown file into a responsive standalone web page. You can also link multiple Markdown files to create a simple website. Designers can alter the visual appearance of displayed pages with the point-and-click Web Page Builder interface or URL parameters. You can also use a set of provided Markdown CSS classes when creating your own Markdown content. In addition, if you use Codeberg or GitHub to store your Markdown files, an **Edit this Page** link can be automatically provided for each page to support collaborative authoring.

It's open source, so you can host a Docsify-This instance using your own custom domain without the risk of platform lock-in.

### Use the Docsify-This Web Page Builder

To use the Web Page Builder, open a browser and navigate to the [Docsify-This website][1] or your local instance. In the **Web Page Builder** section, enter the URL of a Markdown file in a public repo of Codeberg or GitHub (other Git hosts can also be used via Docsify-This URL parameters but not in the Web Page Builder), and then click the **Publish as Standalone Web Page** button.

![The Docsify-This web page builder interface][4]

The Markdown file is rendered as a standalone web page with a URL you can copy and share. Here's an example URL:

```
https://docsify-this.net/?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&homepage=home.md
```

Docsify-This rendered web pages are perfect for embedding, with the ability to visually style Docsify-This pages to the destination platform.

![Docsify-This rendered Markdown file][5]

### Render other files in the same repository

You can render other Markdown files in the same repository by directly editing the Docsify-This URL parameter **homepage**. For example:

```
https://docsify-this.net/?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&homepage=anotherfile.md
```

### Modify the web page's appearance

You can change the appearance of any Markdown file displayed in Docsify-This by using [URL parameters][6]. For example, `font-family`, `font-size`, `link-color`, and `line-height` are all common CSS attributes and are valid parameters for Docsify-This:

```
https://docsify-this.net/?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&homepage=home.md&font-family=Open%20Sans,sans-serif
```

You can also alter the visual appearance using a set of special [Markdown CSS classes][7]. For example, you can add the `button` class to a link:

```
[Required Reading Quiz due Jun 4th](https://canvas.sfu.ca/courses/44038/quizzes/166553 ':class=button')
```

This produces a button image instead of just a text link:

![A button rendered by Docsify-This][8]

In addition to the Markdown CSS classes supported by Docsify-This, you can define your own custom classes within your displayed Markdown files. For example:

```
<style>
.markdown-section .mybutton, .markdown-section .mybutton:hover {
  cursor: pointer;
  color: #CC0000;
  height: auto;
  display: inline-block;
  border: 2px solid #CC0000;
  border-radius: 4rem;
  margin: 2px 0px 2px 0px;
  padding: 8px 18px 8px 18px;
  line-height: 1.2rem;
  background-color: white;
  font-family: -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  font-weight: bold;
  text-decoration: none;
}
</style>

[Custom CSS Class Button](# ':class=mybutton')
```

Produces this:

![A custom button image rendered with Docsify-This][9]

### Include HTML snippets

As supported by standard Markdown, you can include HTML snippets. This allows you to add layout elements to your HTML render. For example:

```
<div class="row">
<div class="column">

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

</div>
<div class="column">

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

</div>
</div>
```

### Embed Docsify-This as an iFrame

You can embed Docsify-This web pages using an iFrame in almost any platform. You can also use URL parameters to ensure your embedded content matches your destination platform:

```
<p><iframe style="overflow: hidden; border: 0px #ffffff none; margin-top: -26px; background: #ffffff;" src="https://docsify-this.net/?basePath=https://raw.githubusercontent.com/paulhibbitts/cmpt-363-222-pages/main&homepage=home.md&font-family=Lato%20Extended,Lato,Helvetica%20Neue,Helvetica,Arial,sans-serif&font-size=1&hide-credits=true" width="800px" height="950px" allowfullscreen="allowfullscreen"></iframe></p>
```

![A Docsify-This page embedded in an LMS][10]

### Embed Docsify-This with an external URL

In certain learning management systems (LMS), including the open source [Moodle][11] and even the proprietary [Canvas][12], you can link external web pages to a course navigation menu and sometimes more. For example, you can use the Redirect Tool in Canvas to display Docsify-This web pages.

```
url=https://docsify-this.net/?basePath=https://raw.githubusercontent.com/paulhibbitts/cmpt-363-222-pages/main&homepage=resources.md&edit-link=https://github.com/paulhibbitts/cmpt-363-222-pages/blob/main/resources.md&font-family=Lato%20Extended,Lato,Helvetica%20Neue, Helvetica,Arial,sans-serif&font-size=1&hide-credits=true
```

### Integrate Docsify-This and Git

To fully leverage the benefits of version control and potentially collaboration using an optional **Edit this Page** link, store your Docsify-This Markdown pages in a Git repository on either Codeberg or GitHub. Several open source tools provide a graphical interface for Git, including [GitHub Desktop][13] (recently released as open source), [Git-Cola][14], and [SparkleShare][15]. The text editors VSCode and Pulsar Edit (formerly [Atom.io][16]) both feature Git integration, too.

**[ Get the [Git tips and tricks][17] eBook ]**

### Markdown publishing made easy

The benefits of Markdown-based publishing are available to everyone, thanks to Docsify. And thanks to Docsify-This, it's easier than ever. Try it out at the [Docsify-This website][1].

--------------------------------------------------------------------------------

via: https://opensource.com/article/23/5/docsify-markdown-html

作者：[Paul Hibbitts][a]
选题：[lkxed][b]
译者：[译者ID](https://github.com/译者ID)
校对：[校对者ID](https://github.com/校对者ID)

本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出

[a]: https://opensource.com/users/paulhibbitts
[b]: https://github.com/lkxed/
[1]: https://docsify-this.net
[2]: https://docsify.js.org
[3]: https://opensource.com/downloads/cheat-sheet-markdown
[4]: https://opensource.com/sites/default/files/2023-04/docsify-this-web-page-builder.webp
[5]: https://opensource.com/sites/default/files/2023-04/docsify-this-rendered-markdown-file.webp
[6]: https://docsify-this.net/#/?id=page-appearance-url-parameters
[7]: https://docsify-this.net/#/?id=supported-markdown-css-classes
[8]: https://opensource.com/sites/default/files/2023-04/button.webp
[9]: https://opensource.com/sites/default/files/2023-04/custom-css-button.webp
[10]: https://opensource.com/sites/default/files/2023-04/docsify-this-iframe.webp
[11]: https://opensource.com/article/21/3/moodle-plugins
[12]: https://github.com/instructure/canvas-lms
[13]: https://github.com/desktop/desktop
[14]: https://opensource.com/article/20/3/git-cola
[15]: https://opensource.com/article/19/4/file-sharing-git
[16]: https://opensource.com/article/20/12/atom
[17]: https://opensource.com/downloads/git-tricks-tips