Implementation of markdown document management tool in PHP


After working, I have been engaged in PHP development, from the previous big package to the now retired server-side writing interface, and I have met with several interface document management tools or systems. Here is a brief description:

  1. Showdoc has comprehensive and simple functions, including user and permission management functions, markdown support, word export support, multiple document templates, directory support two-level folding
  2. Conference, powerful (rights management, email reminder, full-text search, plug-in management, etc.), a document management of heavy and chargingsystem
  3. Swagger, need to write a lot of comments in the code to match
  4. Readmine, with rich functions, is similar to conference. Its documents are saved in txt, which can trace changes and full-text search. However, it is a little painful to write documents, which is suitable for task / bug tracking management, etc
  5. Gitbook, nodejs installation, markdown support, NPM plug-in support. The foldable directory tree on the left needs to be installed with plug-ins or search plug-ins. The directory is a separate markdown file. When I use it, I feel that the compilation from MD to HTML is too slow (for 600 + documents, it takes more than 25 minutes to compile. If there is a plug-in for incremental compilation or to improve the compilation speed, please give me some advice.)

Two months ago, because of the project, a simple tool was needed to manage the interface documents. This time, I will record the experience in the development process here and draw lessons from others~

primary objective

  1. Can be edited by multiple people
  2. Can be viewed in the browser
  3. There is a directory that can be automatically expanded and highlighted
  4. Multi level directory support
  5. Markdown support
  6. Quick and convenient


  1. It can be realized by combining with git, and it can also make use of the rights management function of GIT
  2. Need to compile markdown into HTML file and deploy it to Intranet
  3. Because to view it in the browser,Finally, dtree.js (independent of jQuery) with simple access, clean interface and no dependency is selectedInstead, PHP is used to generate the left directory tree, and CSS is optimized to support PC and mobile display
  4. This function uses the tree’s post root order traversal algorithm to realize the reading of multi-level files (without recursion, worrying about writing to wrap itself in),Dtree.js also supports multi-level directory folding
  5. Here I chooseThe official PHP compilation tool class of segmentfault, use parsedown instead (for SF classes, there is no security check, and multiple line breaks in a single line are supported)
  6. Fast: compile more than 600 files, PHP takes about 1s, acceptable, and supports incremental compilation; convenient: the directory is generated automatically and does not need to be written separately

Problems encountered:

Incremental compilation

At the beginning, we judge whether an MD file needs to be compiled into HTML by comparing the creation time and the last modification time of the MD file,
However, it was later found that some copied and renamed files did not work with this method
Finally, an intermediate file is used to record the time of the compiled file, and then compare it with max (creation time, last modification time) to determine whether it needs to be compiled

Delete redundant files

During subsequent use, it was found that some MD documents were deleted, but the final compiled HTML files were not automatically deleted,
Therefore, at compile time, a difference set will be found between the MD file and the final HTML file, and those redundant HTML files will be deleted

Multi level directory support

At first, I thought that the hierarchical relationship of saving files should be designed according to the multi-level array, and then the directory should be displayed according to the array. Later, I felt that it was too cumbersome to realize the multi-level directory
Later, I changed my thinking. In fact, when displaying files of different levels, they are only indented differently: the indent of the file name is larger than that of the directory name, and the indent of the lower directory is larger than that of the upper directory;
First, the path of all the files in the folder is read out to the one-dimensional array through the tree traversal algorithm;
Then traverse each file path, separate the directory name and file name, after de duplication, use p label to display, according to different levels, increase or decrease the padding left of P label, to achieve the effect of indentation;

The folding and expanding effect of catalog

If the directory name is stored in the P tag, use the attribute data path to record the hash value of the current path (MD5 (A / B / C /),
If the file name is stored in the P tag, the hash value of the upper directory is saved in the class of the P tag,
In this way, when you click the directory name, you can find all the lower level P tags through getelementsbyclass() method according to its hash value to display or hide them

Beautify HTML and support responsive

First, use @ media attribute in CSS to use different styles according to the screen width,
Among them,
When the screen width is greater than 800px, as the PC end, use CSS flex to display the directory and content in the screen at the same time
When the screen width is less than 800px, as the mobile terminal, the directory is hidden by default. Click the floating button in the lower right corner to control the display and hiding of the directory, and the display will be full of the screen
Hide Directory: first, set the width of directory div to the width of the screen (width: 100vw), and then use js to set the left margin of directory div to a negative value (sidebar. Style. Margin left = – window. Client. Width) to hide the directory

Manual compilation is too cumbersome

Later, I found that it was troublesome to manually compile (PHP compile. PHP) in the command line before using git commit,
Add a hook to git, and execute the compile command automatically before submitting, which is much more convenient

Finally, attach the source code

Source code (code cloud GIT)

Usage (cnblog)


Design sketch

Implementation of markdown document management tool in PHP
Implementation of markdown document management tool in PHP
Implementation of markdown document management tool in PHP

Recommended Today

The road of high salary, a more complete summary of MySQL high performance optimization in history

preface MySQL for many linux practitioners, is a very difficult problem, most of the cases are because of the database problems and processing ideas are not clear. Before the optimization of MySQL, we must understand the query process of MySQL. In fact, a lot of query optimization work is to follow some principles so that […]