{"id":73070,"date":"2023-05-02T09:03:02","date_gmt":"2023-05-02T09:03:02","guid":{"rendered":"https:\/\/www.cryptocabaret.com\/?p=73070"},"modified":"2023-05-02T09:03:02","modified_gmt":"2023-05-02T09:03:02","slug":"generate-web-pages-from-markdown-with-docsify-this","status":"publish","type":"post","link":"https:\/\/www.cryptocabaret.com\/?p=73070","title":{"rendered":"Generate web pages from Markdown with Docsify-This"},"content":{"rendered":"

Generate web pages from Markdown with Docsify-This<\/span>
\npaulhibbitts<\/a><\/span>
\nTue, 05\/02\/2023 – 03:00<\/span><\/p>\n

\n

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<\/a>, built with Docsify.js<\/a>, provides an easy way to publish, share, and reuse Markdown content.<\/p>\n

[ Get the Markdown cheat sheet<\/a> ]<\/strong><\/p>\n

What is Docsify-This?<\/h2>\n

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<\/strong> link can be automatically provided for each page to support collaborative authoring.<\/p>\n

It’s open source, so you can host a Docsify-This instance using your own custom domain without the risk of platform lock-in.<\/p>\n

Use the Docsify-This Web Page Builder<\/h2>\n

To use the Web Page Builder, open a browser and navigate to the Docsify-This website<\/a> or your local instance. In the Web Page Builder<\/strong> 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<\/strong> button.<\/p>\n

\n
\"The<\/div>\n
Image by: <\/span><\/p>\n

(Paul Hibbitts, CC BY-A 4.0)<\/p>\n<\/div>\n<\/article>\n

The Markdown file is rendered as a standalone web page with a URL you can copy and share. Here’s an example URL:<\/p>\n

\nhttps:\/\/docsify-this.net\/?basePath=https:\/\/raw.githubusercontent.com\/hibbitts-design\/docsify-this-one-page-article\/main&homepage=home.md<\/code><\/pre>\n
Docsify-This rendered web pages are perfect for embedding, with the ability to visually style Docsify-This pages to the destination platform.<\/p>\n
\n
  \"Docsify-This<\/div>\n
Image by: <\/span><\/p>\n
(Paul Hibbitts, CC BY-A 4.0)<\/p>\n<\/div>\n<\/article>\n
Render other files in the same repository<\/h2>\n
You can render other Markdown files in the same repository by directly editing the Docsify-This URL parameter homepage<\/strong>. For example:<\/p>\n
\nhttps:\/\/docsify-this.net\/?basePath=https:\/\/raw.githubusercontent.com\/hibbitts-design\/docsify-this-one-page-article\/main&homepage=anotherfile.md<\/code><\/pre>\n
Modify the web page’s appearance<\/h2>\n
You can change the appearance of any Markdown file displayed in Docsify-This by using URL parameters<\/a>. For example, font-family<\/code>, font-size<\/code>, link-color<\/code>, and line-height<\/code> are all common CSS attributes and are valid parameters for Docsify-This:<\/p>\n
\nhttps:\/\/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<\/code><\/pre>\n
You can also alter the visual appearance using a set of special Markdown CSS classes<\/a>. For example, you can add the button<\/code> class to a link:<\/p>\n
\n[Required Reading Quiz due Jun 4th](https:\/\/canvas.sfu.ca\/courses\/44038\/quizzes\/166553 ':class=button')  <\/code><\/pre>\n
This produces a button image instead of just a text link:<\/p>\n
\n
  \"A<\/div>\n
Image by: <\/span><\/p>\n
(Paul Hibbitts, CC BY-A 4.0)<\/p>\n<\/div>\n<\/article>\n
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:<\/p>\n
\n\n\n[Custom CSS Class Button](# ':class=mybutton')<\/code><\/pre>\n
Produces this:<\/p>\n
\n
  \"A<\/div>\n
Image by: <\/span><\/p>\n
(Paul Hibbitts, CC BY-A 4.0)<\/p>\n<\/div>\n<\/article>\n
Include HTML snippets<\/h2>\n
As supported by standard Markdown, you can include HTML snippets. This allows you to add layout elements to your HTML render. For example:<\/p>\n
\n
\n
\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit.\n\n<\/div>\n
\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit.\n\n<\/div>\n<\/div><\/code><\/pre>\n
Embed Docsify-This as an iFrame<\/h2>\n
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>\n
\n
<\/p><\/code><\/pre>\n
\n
  \"A<\/div>\n
Image by: <\/span><\/p>\n
(Paul Hibbitts, CC BY-A 4.0)<\/p>\n<\/div>\n<\/article>\n
Embed Docsify-This with an external URL<\/h2>\n
In certain learning management systems (LMS), including the open source Moodle<\/a>\u00a0and even the proprietary Canvas<\/a>, 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.<\/p>\n
\nurl=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<\/code><\/pre>\n<\/p>\n
\n
Our favorite resources about open source<\/div>\n
\n
Git cheat sheet<\/a><\/div>\n
Advanced Linux commands cheat sheet<\/a><\/div>\n
Open source alternatives<\/a><\/div>\n
Free online course: RHEL technical overview<\/a><\/div>\n
Register for your free Red Hat account<\/a><\/div>\n
Check out more cheat sheets<\/a><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
Integrate Docsify-This and Git<\/h2>\n
To fully leverage the benefits of version control and potentially collaboration using an optional Edit this Page<\/strong> 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<\/a> (recently released as open source), Git-Cola<\/a>, and SparkleShare<\/a>. The text editors VSCode and Pulsar Edit (formerly Atom.io<\/a>) both feature Git integration, too.<\/p>\n
[ Get the Git tips and tricks<\/a> eBook ]<\/strong><\/p>\n
Markdown publishing made easy<\/h2>\n
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\u00a0Docsify-This website<\/a>.<\/p>\n<\/div>\n
\n
This open source tool makes it easier than ever to convert Markdown to web pages.<\/p>\n<\/div>\n
\n
\n
  \"Digital<\/div>\n<\/article>\n<\/div>\n
\n
Web development<\/a><\/div>\n<\/p><\/div>\n
What to read next<\/div>\n
\n
5 best practices for PatternFly, an open source design system<\/a><\/div>\n
How I learned the hard way to keep my website updated<\/a><\/div>\n<\/p><\/div>\n

\n        \"Creative<\/a>This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.<\/div>\n
\n
\n
Register<\/a> or Login<\/a> to post a comment.<\/div>\n<\/p><\/div>\n<\/section>\n
Powered by WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"
Generate web pages from Markdown with Docsify-This paulhibbitts Tue, 05\/02\/2023 – 03:00 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, built […]<\/p>\n","protected":false},"author":1,"featured_media":73071,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[307],"tags":[],"class_list":["post-73070","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-open-source"],"_links":{"self":[{"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=\/wp\/v2\/posts\/73070","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=73070"}],"version-history":[{"count":0,"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=\/wp\/v2\/posts\/73070\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=\/wp\/v2\/media\/73071"}],"wp:attachment":[{"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=73070"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=73070"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=73070"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}