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

Why choose GitHub style CSS?

GitHub-style Markdown is favored by a wide range of developers and content creators for its minimalist and clear characteristics.It is not only well-structured, with code blocks highlighted prominently, but also provides a consistent and professional reading experience, which is crucial for improving user experience.Apply this style to your AnQiCMS website and it will instantly make technical documents, tutorial articles, or any text content that includes code become professional and easy to read, while maintaining excellent readability.

The first step is to enable Markdown editor

Before applying GitHub style formatting to your Markdown content, make sure you have enabled the Markdown editor in the AnQiCMS backend.This is usually found and enabled in the 'Global Settings' under 'Content Settings'.After enabling, you can use Markdown syntax to write content while editing documents, and the system will be responsible for converting it into 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 style.

Template files are usually located in AnQiCMS,/templatethe directory, andbase.htmlIt is the basic template file referenced by many pages, very suitable for placing global CSS references. You just need to edit the template directory currently in use.base.htmlfile, in its<head>Add as follows inside the tag<link>Label it:

<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" />

After adding, save and refresh your website page. You will find that all content created and rendered by the Markdown editor will automatically apply the concise and beautiful GitHub style.

How does AnQiCMS handle Markdown content

It is worth mentioning that AnQiCMS automatically converts Markdown content to HTML format in the background and outputs it to the front end.This means you don't have to worry about the conversion process, just focus on writing Markdown syntax.On the template level, AnQiCMS'sarchiveDetailThe tag is calling the document content (such asContentFields will intelligently recognize and process these Markdown converted to HTML ensuring styles are correctly applied. If there are special cases where you need to manually control the Markdown to HTML rendering.archiveDetaillabel'sContentFields also providedrenderParameters for more fine-grained control.

Extended reading: Not just Markdown style

In addition to the GitHub-style CSS, AnQiCMS also provides more enhanced features for content creation. For example, you can do it in a similar way, inbase.htmlIntroduce additional JavaScript libraries to dynamically render 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 is committed to making content operation simpler and more efficient, even in the details, we strive to provide**solutions for you.

Frequently Asked Questions (FAQ)

  1. Q: After applying GitHub style CSS, why did the style of other non-Markdown areas of my website also change? A:GitHub Markdown CSS is mainly aimed at 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 GitHub styles.A common approach to solving this problem is to add a specific container to all Markdown rendering areas in the template, such as<div class="markdown-body">...您的Markdown内容...</div>Then place the GitHub CSS link inside this container or use a more precise CSS selector such as.markdown-body h1 { ... }) to ensure that the style only applies to the specified Markdown area.

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

3