There are many tools for writing documents, but as programmers, most people still prefer Markdown. Sometimes they need to write a development document for themselves or others to view. How to convert Markdown files into documents?
docsify can do this. docsify can directly load Markdown files and dynamically render them. At the same time, it can also generate cover pages and deploy them in github pages. The effect images are as follows:
docsify official document: https://docsify.js.org/#/zh-cn/
1. Install docsify
The node environment is required to install docsify, so you must install the node environment before proceeding to the next step.
Node download address: https://nodejs.org/zh-cn/download/current/
After configuring the node environment, download the docsify component using npm:
npm i docsify-cli -g
2. Initialize document directory
Demo for windows system
Create a new directory called LearnJavaToFindAJob
Enter the directory and create a new file docs
The docs directory represents the root directory of all my articles
docsify init ./docs
See that this directory generates files:
This index.html is the home page, which can be placed on your own server and deployed using Nginx and Tomcat. Or you can use GitHubPage for deployment.
3. Run
docsify serve ./docs
Open http://localhost:3000 You'll find that you can access the document.
4. Other configurations
docsify provides many configurations for users to set by themselves. More detailed configurations can be found on the official website:
docsify official document: https://docsify.js.org/#/zh-cn/
Here are my own configurations:
4.1,index.html
If you have many MD files, the first access is very slow, because the principle of docsify is to render MD files into html, so you can add a prompt during the white screen time:
<div id="app">
Loading.....
</div>Other plug-ins:
<script>
window.$docsify = {
coverpage: true,
name: 'LearnJavaToFindAJob',
//Click the URL corresponding to name
nameLink: '#/README',
repo: 'https://github.com/DogerRain/LearnJavaToFindAJob',
loadNavbar: true,
loadSidebar: true, // Load custom sidebar
maxLevel: 0, // By default, all titles in the document will be captured and rendered into a directory. You can configure the title level that supports rendering at most.
subMaxLevel: 0, // Maximum level of the build directory
mergeNavbar: true, // Merge navigation bar to sidebar under small screen device
alias: { // Define routing aliases to define routing rules more freely. Support regular
'/.*/_sidebar.md': '/_sidebar.md',//Prevent accidental fallback
'/.*/_navbar.md': '/_navbar.md'
},
auto2top: true,
//Code one click Copy
copyCode: {
buttonText: 'copy',
errorText: 'Error',
successText: 'Copy succeeded'
},
//paging
pagination: {
previousText: 'Previous chapter',
nextText: 'Next chapter',
crossChapter: true,
crossChapterText: true,
},
//global search
search: {
paths: 'auto',
placeholder: 'search',
noData: 'No results found',
depth: 3, //Search Title Depth
},
//Word count, js needs to be introduced
count:{
countable:true,
fontsize:'0.9em',
color:'rgb(90,90,90)',
language:'chinese'
},
coverpage: true,
onlyCover: true
}
</script>
<!-- Docsify v4 core-->
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
<!--Highlight of different codes-->
<script src="//cdn.jsdelivr.net/npm/prismjs@1.22.0/components/prism-c.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1.22.0/components/prism-cpp.min.js"></script>
<script src="//unpkg.com/prismjs/components/prism-bash.js"></script>
<script src="//unpkg.com/prismjs/components/prism-java.js"></script>
<script src="//unpkg.com/prismjs/components/prism-sql.js"></script>
<script src="//unpkg.com/prismjs/components/prism-bash.js"></script>
<script src="//unpkg.com/prismjs/components/prism-c.js"></script>
<script src="//unpkg.com/prismjs@1.23.0/components.js"></script>
<!--Code copy-->
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
<!--Picture zoom-->
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
<!--paging-->
<script src="//cdn.jsdelivr.net/npm/docsify-pagination/dist/docsify-pagination.min.js"></script>
<!--search-->
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
<!--word count -->
<script src="//unpkg.com/docsify-count/dist/countable.js"></script>
<!--theme-->
<!--<script src="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/js/docsify-themeable.min.js"></script>-->
<!--Interview statistics of bulianzi-->
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>4.2. Left column
Create a new_ sidebar.md file, you only need to write your own table title and path:
(Note: this must correspond to the relative path of your article)
- [algorithm](articles\algorithm\High frequency algorithm interview questions.md)
- [Eight sorting algorithms](articles\algorithm\Eight sorting algorithms.md)
- <font style="color:orange;font-size:14px;font-weight:500">character string(auxiliary Map): </font>
- [1-Sum of two numbers](articles\algorithm\1-Sum of two numbers.md)
- [2-Add two numbers](articles\algorithm\2 Add two numbers.md)
- [387-The first unique character in the string](articles\algorithm\387-The first unique character in the string.md)
- [20-Valid parentheses](articles\algorithm\20-Valid parentheses.md)
- [09-Implement a queue with two stacks](articles\algorithm\09-Implement a queue with two stacks.md)
- <font style="color:orange;font-size:14px;font-weight:500">Linked list:</font>
- [19-Delete the penultimate of the linked list N Nodes](articles\algorithm\19-Delete the penultimate of the linked list N Nodes.md)
- [206-Flip linked list](articles\algorithm\206-Flip linked list.md)
- [141 Circular linked list](articles\algorithm\141 Circular linked list.md)
- [234 Palindrome linked list](articles\algorithm\234 Palindrome linked list.md)
- <font style="color:orange;font-size:14px;font-weight:500">Tree:</font>
- [543-Maximum diameter of binary tree](articles\algorithm\543 Maximum diameter of binary tree.md)
- [11-Container with the most water](articles\algorithm\11-Container with the most water.md)
- <font style="color:orange;font-size:14px;font-weight:500">Dynamic planning:</font>
- [70-climb stairs](articles\algorithm\70-climb stairs.md)
- [53-Continuous maximal suborder sum](articles\algorithm\53-Continuous maximal suborder sum.md)
- <font style="color:orange;font-size:14px;font-weight:500">to flash back:</font>
- [46-Full arrangement](articles\algorithm\46-Full arrangement.md) Display effect:
4.3 navigation bar
Create a new_ navbar.md file, write:
* [Technology blog](https://rain.baimuxym.cn/) * [Github address](https://github.com/DogerRain/LearnJavaToFindAJob)
Display effect:
4.4 home page
Create a new_ coverpage.md file, write:
<!--picture--> <div align="center"> <img src="https://blog-1253198264.cos.ap-guangzhou.myqcloud.com/%E5%85%AC%E4%BC%97%E5%8F%B7HelloCoder.png"/ style="zoom:50%;"> </div> <!--Some description--> # LearnJavaToFindAJob ### Learnjavatofind ajob is an interview guide to help Java programmers find a job. - Java Common interview questions - MySQL,MQ,Nginx Other middleware - Computer network, operating system - High frequency algorithm - Original title of Dachang - Project experience - resume <!--Statistics of garlic seeds--> <span id="busuanzi_container_site_pv"> 👀 Total visits of this site <span id="busuanzi_value_site_pv"></span>second </span>| 🐒Number of visitors to this site<span id="busuanzi_value_site_uv"></span>Person time [Start reading](/README.md) <!--cover--> 
When you open it after setting, you will find that the cover has changed:
Experience address:
- https://learnjava.baimuxym.cn Acetic acid bacteria I have some experience and questions about Java interview.