Generate internet pages from Markdown with Docsify-This

Are you curious about leveraging Markdown for on-line content material with none web site setup or construct course of? How about seamlessly embedding constraint-free Markdown or HTML into a number of platforms (resembling a content material administration system or studying administration system)? The open supply venture Docsify-This, constructed with Docsify.js, supplies a straightforward solution to publish, share, and reuse Markdown content material.

[ Get the Markdown cheat sheet ]

What is Docsify-This?

With Docsify-This, you possibly can immediately flip any publicly out there Markdown file right into a responsive standalone internet web page. You also can hyperlink a number of Markdown recordsdata to create a easy web site. Designers can alter the visible look of displayed pages with the point-and-click Web Page Builder interface or URL parameters. You also can use a set of supplied Markdown CSS lessons when creating your individual Markdown content material. In addition, when you use Codeberg or GitHub to retailer your Markdown recordsdata, an Edit this Page hyperlink could be routinely supplied for every web page to assist collaborative authoring.

It’s open supply, so you possibly can host a Docsify-This occasion utilizing your individual customized area with out the danger 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 or your native occasion. In the Web Page Builder part, enter the URL of a Markdown file in a public repo of Codeberg or GitHub (different Git hosts may also be used through Docsify-This URL parameters however not within the Web Page Builder), after which click on the Publish as Standalone Web Page button.

The Markdown file is rendered as a standalone internet web page with a URL you possibly can copy and share. Here’s an instance URL:

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

Docsify-This rendered internet pages are good for embedding, with the flexibility to visually model Docsify-This pages to the vacation spot platform.

Render different recordsdata in the identical repository

You can render different Markdown recordsdata in the identical repository by immediately enhancing the Docsify-This URL parameter homepage. For instance:

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

Modify the online web page’s look

You can change the looks of any Markdown file displayed in Docsify-This through the use of URL parameters. For instance, font-family, font-size, link-color, and line-height are all frequent CSS attributes and are legitimate 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 also can alter the visible look utilizing a set of particular Markdown CSS classes. For instance, you possibly can add the button class to a hyperlink:

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

This produces a button picture as a substitute of only a textual content hyperlink:

In addition to the Markdown CSS lessons supported by Docsify-This, you possibly can outline your individual customized lessons inside your displayed Markdown recordsdata. For instance:

<model>
.markdown-section .mybutton, .markdown-section .mybutton:hover {
  cursor: pointer;
  shade: #CC0000;
  peak: auto;
  show: inline-block;
  border: 2px strong #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: daring;
  text-decoration: none;
}
</model>

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

Produces this:

Include HTML snippets

As supported by customary Markdown, you possibly can embrace HTML snippets. This means that you can add format components to your HTML render. For instance:

<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 internet pages utilizing an iFrame in nearly any platform. You also can use URL parameters to make sure your embedded content material matches your vacation spot platform:

<p><iframe model="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" peak="950px" allowfullscreen="allowfullscreen"></iframe></p>

Embed Docsify-This with an exterior URL

In sure studying administration techniques (LMS), together with the open supply Moodle and even the proprietary Canvas, you possibly can hyperlink exterior internet pages to a course navigation menu and typically extra. For instance, you should use the Redirect Tool in Canvas to show Docsify-This internet 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 totally leverage the advantages of model management and probably collaboration utilizing an non-obligatory Edit this Page hyperlink, retailer your Docsify-This Markdown pages in a Git repository on both Codeberg or GitHub. Several open supply instruments present a graphical interface for Git, together with GitHub Desktop (just lately launched as open supply), Git-Cola, and SparkleShare. The textual content editors VSCode and Pulsar Edit (previously Atom.io) each characteristic Git integration, too.

[ Get the Git tips and tricks eBook ]

Markdown publishing made simple

The advantages of Markdown-based publishing can be found to everybody, because of Docsify. And because of Docsify-This, it is simpler than ever. Try it out on the Docsify-This website.