Skip to content

Commit

Permalink
Merge pull request #146 from hibbitts-design/docsify-this-v1
Browse files Browse the repository at this point in the history 
Docsify this v1
  • Loading branch information
@paulhibbitts
paulhibbitts authored Nov 8, 2024
2 parents 906efa0 + 0660aad commit b721a88
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 50 deletions.
49 changes: 25 additions & 24 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,9 +58,10 @@ _Figure 1. [Docsify-This.net](https://docsify-this.net) Web Page Builder._

<h3><a href="#5-tips-techniques-and-troubleshooting-1">5. Tips, Techniques, and Troubleshooting</a></h3>
<ul>
<li><a href="#making-a-markdown-file-available-online">Making a Markdown File Available Online</a></li>
<li><a href="#improving-markdown-previews-in-text-editors">Improving Markdown Previews in Text Editors</a></li>
<li><a href="#loading-web-page-builder-custom-settings">Loading Web Page Builder Custom Settings</a></li>
<li><a href="#tips-and-techniques">Tips and Techniques</a></li>
<li><a href="#content-display-tips-and-techniques">Content Display Tips and Techniques</a></li>
<li><a href="#troubleshooting">Troubleshooting</a></li>
</ul>

Expand Down Expand Up @@ -1001,13 +1002,34 @@ An overview to self-publishing with Markdown using the open source project Docsi

### 5. Tips, Techniques, and Troubleshooting

* [Making a Markdown File Available Online](#making-a-markdown-file-available-online)
* [Improving Markdown Previews in Text Editors](#improving-markdown-previews-in-text-editors)
* [Loading Web Page Builder Custom Settings](#loading-web-page-builder-custom-settings)
* [Tips and Techniques](#tips-and-techniques)
* [Content Display Tips and Techniques](#content-display-tips-and-techniques)
* [Troubleshooting](#troubleshooting)

---

##### Making a Markdown File Available Online
There are multiple ways to get a raw Markdown file available online, here are three options to help you get started:

**GitHub or Codeberg:**
1. Signup for a [GitHub](https://github.com) or [Codeberg](https://codeberg.org) account
2. Create a new repository and upload your Markdown file
3. View the uploaded file, and copy/paste that URL into the Docsify-This **Markdown File URL** field

**Gist (GitHub Gists):**
1. Signup for a [GitHub](https://github.com) account
1. Create a gist with your Markdown file at https://gist.github.com
2. Enter a filename ending with `.md` (e.g. `myfile.md`)
3. Choose **Create public gist** and tap on that button
4. Tap on **Raw** button in the upper right of your Gist field and copy/paste that URL into the Docsify-This **Markdown File URL** field

**Personal or Organizational Website:**
1. Obtain login information for your server
2. Upload the Markdown file to your server
3. Navigate to the location of that file, view the contents in your Browser, and copy/paste that URL into the Docsify-This **Markdown File URL** field

#### Improving Markdown Previews in Text Editors

Some text editors, such as [Microsoft Visual Studio](https://code.visualstudio.com/) (including the online [GitHub.dev web editor](https://docs.github.com/en/codespaces/the-githubdev-web-based-editor)), have the ability to link your own CSS so Markdown previews are more visually accurate. If your editor supports this ability, the below CSS files can be used.
Expand Down Expand Up @@ -1065,9 +1087,8 @@ The quickest way to create such a shareable URL is to use the Docsify-This Web P

---

#### Tips and Techniques
#### Content Display Tips and Techniques

* [Making a Raw Markdown File Available Online](#making-a-raw-markdown-file-available-online)
* [Matching Fonts with Your Destination Platform Content](#matching-fonts-with-your-destination-platform-content)
* [Providing a Page Table of Contents within a Smaller Area](#providing-a-page-table-of-contents-within-a-smaller-area)
* [Including Code Blocks](#including-code-blocks)
Expand All @@ -1078,26 +1099,6 @@ The quickest way to create such a shareable URL is to use the Docsify-This Web P
* [Use of Camel Case (e.g. camelCase) Format for URL parameters](#use-of-camel-case-eg-camelcase-format-for-url-parameters)
* [Use of New Web Editor GitHub.dev](#use-of-new-web-editor-githubdev)

##### Making a Raw Markdown File Available Online
There are multiple ways to get a raw Markdown file available online, here are three options to help you get started:

**GitHub or Codeberg:**
1. Signup for a [GitHub](https://github.com) or [Codeberg](https://codeberg.org) account
2. Create a new repository and upload your Markdown file
3. View the uploaded file, and copy/paste that URL into the Docsify-This **Markdown File URL** field

**Gist (GitHub Gists):**
1. Signup for a [GitHub](https://github.com) account
1. Create a gist with your Markdown file at https://gist.github.com
2. Enter a filename ending with `.md` (e.g. `myfile.md`)
3. Choose **Create public gist** and tap on that button
4. Tap on **Raw** button in the upper right of your Gist field and copy/paste that URL into the Docsify-This **Markdown File URL** field

**Personal or Organizational Website:**
1. Obtain login information for your server
2. Upload the Markdown file to your server
3. Navigate to the location of that file, view the contents in your Browser, and copy/paste that URL into the Docsify-This **Markdown File URL** field

##### Matching Fonts with Your Destination Platform Content
Use a page inspector to identify the font family and font size used in the platform you are embedding Docsify-This content in, and then pass that font family using the `font-family` ([encoded](https://meyerweb.com/eric/tools/dencoder/), where spaces are replaced with '%20') and `font-size` (REM units) URL parameters to Docsify-This. For example, to match fonts with the Canvas LMS:
https://docsify-this.net?basePath=https://raw.githubusercontent.com/paulhibbitts/cmpt-363-222-pages/main&homepage=topics.md&font-family=Lato%20Extended,Lato,Helvetica%20Neue,Helvetica,Arial,sans-serif&font-size=1
Expand Down
53 changes: 27 additions & 26 deletions docs/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -235,9 +235,10 @@ Page layout:
- [Additional Docsify-This Learning Materials](/?id=additional-docsify-this-learning-materials)

### [5. Tips, Techniques, and Troubleshooting](/?id=_5-tips-techniques-and-troubleshooting-1)
- [Making a Markdown File Available Online](/?id=making-a-markdown-file-available-online)
- [Improving Markdown Previews in Text Editors](/?id=improving-markdown-previews-in-text-editors)
- [Loading Web Page Builder Custom Settings](/?id=loading-web-page-builder-custom-settings)
- [Tips and Techniques](/?id=tips-and-techniques)
- [Content Display Tips and Techniques](/?id=content-display-tips-and-techniques)
- [Troubleshooting](/?id=troubleshooting)

### [6. Support and Policies](/?id=_6-support-and-policies-1)
Expand Down Expand Up @@ -1313,13 +1314,34 @@ An overview to self-publishing with Markdown using the open source project Docsi

### 5. Tips, Techniques, and Troubleshooting

* [Improving Markdown Previews in Text Editors](#improving-markdown-previews-in-text-editors)
* [Making a Markdown File Available Online](/?id=making-a-markdown-file-available-online)
* [Improving Markdown Previews in Text Editors](/?id=improving-markdown-previews-in-text-editors)
* [Loading Web Page Builder Custom Settings](/?id=loading-web-page-builder-custom-settings)
* [Tips and Techniques](#tips-and-techniques)
* [Troubleshooting](#troubleshooting)
* [Content Display Tips and Techniques](/?id=content-display-tips-and-techniques)
* [Troubleshooting](/?id=troubleshooting)

---

##### Making a Markdown File Available Online
There are multiple ways to get a raw Markdown file available online, here are three options to help you get started:

**GitHub or Codeberg:**
1. Signup for a [GitHub](https://github.com) or [Codeberg](https://codeberg.org) account
2. Create a new repository and upload your Markdown file
3. View the uploaded file, and copy/paste that URL into the Docsify-This **Markdown File URL** field

**Gist (GitHub Gists):**
1. Signup for a [GitHub](https://github.com) account
1. Create a gist with your Markdown file at https://gist.github.com
2. Enter a filename ending with `.md` (e.g. `myfile.md`)
3. Choose **Create public gist** and tap on that button
4. Tap on **Raw** button in the upper right of your Gist field and copy/paste that URL into the Docsify-This **Markdown File URL** field

**Personal or Organizational Website:**
1. Obtain login information for your server
2. Upload the Markdown file to your server
3. Navigate to the location of that file, view the contents in your Browser, and copy/paste that URL into the Docsify-This **Markdown File URL** field

#### Improving Markdown Previews in Text Editors

Some text editors, such as [Microsoft Visual Studio](https://code.visualstudio.com/) (including the online [GitHub.dev web editor](https://docs.github.com/en/codespaces/the-githubdev-web-based-editor)), have the ability to link your own CSS so Markdown previews are more visually accurate. If your editor supports this ability, the below CSS files can be used.
Expand Down Expand Up @@ -1377,9 +1399,8 @@ The quickest way to create such a shareable URL is to use the Docsify-This Web P

---

#### Tips and Techniques
#### Content Display Tips and Techniques

* [Making a Raw Markdown File Available Online](/?id=making-a-raw-markdown-file-available-online)
* [Matching Fonts with Your Destination Platform Content](/?id=matching-fonts-with-your-destination-platform-content)
* [Providing a Page Table of Contents within a Smaller Area](/?id=providing-a-page-table-of-contents-within-a-smaller-area)
* [Including Code Blocks](/?id=including-code-blocks)
Expand All @@ -1390,26 +1411,6 @@ The quickest way to create such a shareable URL is to use the Docsify-This Web P
* [Use of Camel Case (e.g. camelCase) Format for URL parameters](/?id=use-of-camel-case-eg-camelcase-format-for-url-parameters)
* [Use of New Web Editor GitHub.dev](/?id=use-of-new-web-editor-githubdev)

##### Making a Raw Markdown File Available Online
There are multiple ways to get a raw Markdown file available online, here are three options to help you get started:

**GitHub or Codeberg:**
1. Signup for a [GitHub](https://github.com) or [Codeberg](https://codeberg.org) account
2. Create a new repository and upload your Markdown file
3. View the uploaded file, and copy/paste that URL into the Docsify-This **Markdown File URL** field

**Gist (GitHub Gists):**
1. Signup for a [GitHub](https://github.com) account
1. Create a gist with your Markdown file at https://gist.github.com
2. Enter a filename ending with `.md` (e.g. `myfile.md`)
3. Choose **Create public gist** and tap on that button
4. Tap on **Raw** button in the upper right of your Gist field and copy/paste that URL into the Docsify-This **Markdown File URL** field

**Personal or Organizational Website:**
1. Obtain login information for your server
2. Upload the Markdown file to your server
3. Navigate to the location of that file, view the contents in your Browser, and copy/paste that URL into the Docsify-This **Markdown File URL** field

##### Matching Fonts with Your Destination Platform Content
Use a page inspector to identify the font family and font size used in the platform you are embedding Docsify-This content in, and then pass that font family using the `font-family` ([encoded](https://meyerweb.com/eric/tools/dencoder/), where spaces are replaced with '%20') and `font-size` (REM units) URL parameters to Docsify-This. For example, to match fonts with the Canvas LMS:
https://docsify-this.net?basePath=https://raw.githubusercontent.com/paulhibbitts/cmpt-363-222-pages/main&homepage=topics.md&font-family=Lato%20Extended,Lato,Helvetica%20Neue,Helvetica,Arial,sans-serif&font-size=1
Expand Down

0 comments on commit b721a88

Please sign in to comment.