In website operation, high-quality content is the core to attract users, and the beautiful layout of content directly affects the reading experience.AnQiCMS provides a powerful Markdown editor, making content creation efficient and convenient.To make these Markdown content display professional and tidy visual effects on your website, we can simply configure them to have GitHub-style CSS styles.

Why choose the GitHub style CSS?

Enabling the Markdown editor is the first step

Before applying GitHub style formatting to your Markdown content, please make sure you have enabled the Markdown editor in the AnQiCMS backend.This can usually be found and enabled in the 'Content Settings' under 'Global Settings'.Enabled, you can use Markdown syntax to write content when editing documents, and the system will be responsible for converting it to HTML format that the web can recognize.

Introduce GitHub-style CSS to your website

To apply GitHub style CSS to rendered Markdown content, we recommend using open-source style sheets from a CDN (Content Delivery Network).This method not only loads quickly, but also ensures that you always use the latest and most stable styles.

In AnQiCMS, template files are usually located in/templatedirectory, andbase.htmlIs the basic template file referenced by many pages, very suitable for placing global CSS references. You only need to edit the directory of the currently used template.base.htmlfile, in its<head>script reference inside the<link>the tag:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />

Add the completion, then save and refresh your website page.You will find that all content created and rendered by the Markdown editor will be automatically applied with a simple and beautiful GitHub style.

AnQiCMS How to handle Markdown content

It is worth mentioning that AnQiCMS will automatically convert Markdown content to HTML format in the background and output it to the front end.This means you do not have to worry about the conversion process, just focus on writing Markdown syntax.archiveDetailTags in calling document content (such asContentWhen a field is set to ，it will intelligently recognize and handle these Markdown conversions to HTML, ensuring that the styles are applied correctly. If there are special cases that require manual control of the rendering from Markdown to HTML,archiveDetailTagsContentThe field also providesrenderParameters for fine-grained control.

Extended reading: More than just Markdown style

In addition to CSS in the GitHub style, AnQiCMS also provides more enhanced features for content creation. For example, you can use a similar method to,base.htmlIntroducing additional JavaScript libraries to enable dynamic rendering of mathematical formulas (MathJax) and flowcharts (Mermaid).These features further enrich the expression of content, making AnQiCMS not only a good helper for content management, but also a powerful tool for technical content display, adding more professionalism and interactivity to your website.

By following these simple steps, your AnQiCMS website can have a professional GitHub style Markdown content display, greatly enhancing the user reading experience and the overall image of the website.AnQiCMS aims to make content operations simpler and more efficient, even in the details, striving to provide **solutions for you.

Common Questions and Answers (FAQ)

  1. Q: Why did the styles of other non-Markdown areas of my website change after applying GitHub style CSS? A:GitHub Markdown CSS is mainly for standard HTML tags (such ash1-h6/p/ul/ol/table/pre/codeDefine styles.If other parts of your template also use these native tags and there is no custom style override, they may be affected by the GitHub style.<div class="markdown-body">...您的Markdown内容...</div>English the GitHub CSS link inside this container, or through a more precise CSS selector (for example.markdown-body h1 { ... }Ensure that the style only applies to the specified Markdown area.

  2. Q: Can I modify some colors or fonts in the GitHub style CSS? A:Of course, you can.CSS's an important feature is its 'cascading'.This means that you can write your own CSS rules within your template file (or a separate custom CSS file) after introducing the GitHub Markdown CSS to override GitHub's default styles.h1Title color, can be addedh1 { color: #your-custom-color; }. Since your custom style is loaded after the GitHub style, or uses more specific selectors, it will take precedence over the GitHub style.

3