Original link:https://blog.guhub.cn/code/typecho-plugin-bracketdown.html
Recently, I’m doing secondary development on the Ringo theme , and I named the secondary development theme Matcha, which is now open source, and I plan to release it officially after enriching its functions.
During the development process, in order to conform to the tradition of previous topics such as Miracles and my personal usage habits, I planned to add the shortcode function in the article to the topic, but it seems a bit stupid to write this function again every time I develop a new topic, and Compatibility with other themes is also not good. After some thought, I decided to make the shortcode functionality a plugin that would work with most themes. Thus, BracketDown came into being.
About BracketDown
Obviously, the name of BracketDown borrows the famous text markup language Markdown, which is also the language used by Typecho’s native article editor, and the purpose of BracketDown is to expand the Markdown syntax.
But unlike Markdown, the syntax used by BracketDown, or most of the short codes commonly found in text editors, are mostly enclosed in parentheses, similar to simple HTML tags, while Markdown syntax is mostly composed of * , - Such special symbols are defined. That’s why I named it BracketDown.
However, BracketDown also has some grammars that are not simply composed of square brackets. These grammars are usually derived from the themes of other bigwigs, some unwritten rules, or a comprehensive decision. This type of grammar usually has a single function, involves relatively short texts, lacks customization, and carries less information.
Such short codes can be used as long as they are written directly in the editor.
In addition, there is another reason why I named this plug-in BracketDown: it is a homonym of “Break it down.” This sentence has the meaning of “subdivide / reduce … for the convenience of others to understand / use”. The reason why I made this plugin is to reduce some repetitive steps that I am used to doing when developing themes, so as to be convenient for myself; the second is to simplify these functions that could have been implemented in a more complex way for the convenience of users; Because this plugin can optimize the text layout, subdivide the paragraphs, and place them in the components provided by each shortcode, making it easier for readers to read.
demo
Block
Text blocks are used to make a portion of the text stand out in a more prominent way. The default style of text block is a box with a light gray border and a light gray background.
Usually text blocks are used to mark additional important information in the text. Many times bloggers will use blockquotes to accomplish the same thing, even if the text is not a quote. In this case, the text block is more A better choice for blockquotes.
It looks like this.
- Apply “ice” to cylindrical objects
- Fixing the Pharyngeal Stone Above or Below a Cylindrical Object
- Pour constant body water on the pharynx
- Mix a variant substance that dissolves in constant water with “ice”
- Throws a cylindrical object upwards
- bury the throat stone in the ground, or cover the surface with any object
- Touch the “ice” for at least two minutes
- Tap a cylindrical object about three times
Complete the above in any order to complete the experiment.
Drop-down box (Details)
As the name suggests, the drop-down box syntax can create a structure that only displays the title by default, displays detailed content when clicked, and collapses when clicked again, used to write some less important information that can be used for reference.
The drop-down box of BracketDown uses the HTML native <details> tag. This feature is relatively new, so the plugin introduces a corresponding shim to improve its compatibility.
It looks like this.
Appendix: How to Conduct a Simple Constant Set Breakthrough Experiment
- Take an appropriate amount of solid flammable substances of any type (required to be able to be directly ignited in the air);
- Put it into a vacuum bottle and evacuate the air inside (the volume of the vacuum bottle is strictly limited to 666 mL);
- Try lowering the pressure in the vacuum bottle until the flammable material you put in is completely liquid or gaseous;
- Continue to accelerate and rotate the vacuum bottle until the liquid flammable material forms a film on the bottle wall due to centrifugal force, or the gas flammable material shows a tendency to liquefy;
- Continue to rotate the vacuum bottle at the original speed, while heating the vacuum bottle, until the vacuum bottle explodes;
- If an explosion occurs, the experiment is successful.
Grid
If you know grid/raster in front-end design, then you can easily get started with this syntax. If you don’t understand, here are some simple instructions.
Grid syntax allows article content to be displayed in columns, similar to a table without headers and borders. There are two concepts to understand here: Row and Column.
Any column should be placed in a row, the width of the row is fixed at 12, and the width of the column can take an integer from 1 to 12.
For example, if a row has two columns, one with a width of 4 and the other with a width of 8, then they will each occupy 1/3 and 2/3 of the row.
row is used to create rows and is essential; col is used to create columns, where the grid attribute defines the width of the column.
It might look like this. (Note, I nested a layer of block in the outer layer)
On the mobile side, the width of the screen is narrowed. If the width of the column is too small at this time, the content of the article will be squeezed into a long strip, which is difficult to read. In order to solve this problem, BracketDown is compatible with the responsive design of the Bootstrap grid, that is, you can set the size of the screen under which the grid will take effect.
See BigCoke233/typecho-plugin-BracketDown for a more detailed syntax introduction.
use
Go to BigCoke233/typecho-plugin-BracketDown to check, remember to click star~
This article is reproduced from:https://blog.guhub.cn/code/typecho-plugin-bracketdown.html
This site is for inclusion only, and the copyright belongs to the original author.