docsify-v5-css-issues

Edit the code to make changes and see it instantly in the preview

Explore this online docsify-v5-css-issues sandbox and experiment with it yourself using our interactive online playground. You can use it as a template to jumpstart your development with this pre-built solution.
With CodeSandbox, you can easily learn how paulhibbitts has skilfully integrated different packages and frameworks to create a truly impressive web app.
You can also fork this sandbox and keep building it using our online code editor for React, JavaScript, Node.js, and other web programming languages.

Quick start

It is recommended to install docsify-cli globally, which helps initializing and previewing the website locally.

npm i docsify-cli -g

Initialize

If you want to write the documentation in the ./docs subdirectory, you can use the init command.

docsify init ./docs

Writing content

After the init is complete, you can see the file list in the ./docs subdirectory.

  • index.html as the entry file
  • README.md as the home page
  • .nojekyll prevents GitHub Pages from ignoring files that begin with an underscore

You can easily update the documentation in ./docs/README.md, of course you can add more pages.

Preview your site

Run the local server with docsify serve. You can preview your site in your browser on http://localhost:3000.

docsify serve docs

?> For more use cases of docsify-cli, head over to the docsify-cli documentation.

Manual initialization

If you don't like npm or have trouble installing the tool, you can manually create index.html:

<!-- index.html --> <!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="UTF-8"> <link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css"> </head> <body> <div id="app"></div> <script> window.$docsify = { //... } </script> <script src="//unpkg.com/docsify/lib/docsify.min.js"></script> </body> </html>

If you installed python on your system, you can easily use it to run a static server to preview your site.

cd docs && python -m SimpleHTTPServer 3000

Loading dialog

If you want, you can show a loading dialog before docsify starts to render your documentation:

 <!-- index.html --> <div id="app">Please wait...</div>

You should set the data-app attribute if you changed el:

 <!-- index.html --> <div data-app id="main">Please wait...</div> <script> window.$docsify = { el: '#main' } </script>

Created by

Forked from JavaScript template

Template type: parcel

Likes: 0 users liked this sandbox
Views: 5 unique visitors has visited
Forks: 1 copies made

Tags

Dev Dependencies