# Some tips and tricks when written articles for Docusaurus > Boost your Docusaurus articles with essential tips and tricks. Learn how to add Admonitions, apply inline styling, and highlight code lines easily. ---  **TL;DR** This article is a reminder of essential Docusaurus authoring features: the `truncate` marker for blog post previews, admonitions for callout boxes, inline styling with ``, a custom `Highlight` component for colored text, and `// highlight-next-line` to draw attention to changed lines in code blocks. If you're writing for Docusaurus, there are a few tips to know. This article is by no means exhaustive, but for me, it's a reminder of the features that are really essential and must not be forgotten. *Two more authoring habits worth adopting early: keeping your [tags under control](/blog/docusaurus-tags) and [displaying related posts](/blog/docusaurus-relatedposts) below each article.* ## Read more [Official documentation](https://docusaurus.io/docs/blog#blog-list) In blog mode, your article is divided into two parts: the introduction with a *Read More* link, and then the main part of the article. To activate this feature, simply add the line `` (preceded and followed by an empty line) where you wish to distinguish between the introduction and the main part. If you go to my [blog](/blog) page, each article has an introduction followed by a `` line in my Markdown source. ## Admonitions [Official documentation](https://docusaurus.io/docs/markdown-features/admonitions) Used to highlight a paragraph in your document, f.i. a *Pay attention to...* or *Tip: Did you know that...* box. ```markdown Never give your bank card code to a stranger. ``` Will be displayed by Docusaurus like this: > **Pay attention to...:** > > Never give your bank card code to a stranger. ## Inline style Docusaurus supports inline style by the use of a ` ... ` notation. The notation `I'm written in blue` will give I'm written in blue. Used very occasionally, this is a very simple way of changing the style of content on your page. ### Highlight component If your ambition is to highlight some text, there is a better solution: the **Highlight component**. Please create the `src/components/Highlight/index.tsx` file: **src/components/Highlight/index.tsx** ```typescript /** * Highlight Component * * A simple React component used to emphasize inline content with a custom background color. * Typically used in blog posts or documentation pages within a Docusaurus site. * * Example usage: * Important note */ import type { JSX, ReactNode } from "react"; interface Props { children: ReactNode; color: string; } export default function Highlight({ children, color }: Props): JSX.Element { return ( {children} ); } ``` Then edit (or create) the `src/theme/MDXComponents.js` file. If the file already exists, just add the highlighted lines below. If not yet present, create the file with the content below: **src/theme/MDXComponents.js** ```javascript import React from "react"; import MDXComponents from "@theme-original/MDXComponents"; // [...] // highlight-next-line import Highlight from "@src/components/Highlight"; export default { // Reusing the default mapping ...MDXComponents, // [...] // highlight-next-line Highlight }; ``` **Docusaurus green** and **Facebook blue** are my favorite colors. Source: [MDX and React](https://docusaurus.io/docs/markdown-features/react#exporting-components) ## Highlight lines [Official documentation](https://docusaurus.io/docs/markdown-features/code-blocks#line-highlighting) The `// highlight-next-line` is **really** useful when you wish to put in evidence changes you've done to a give code block. *When the code lives in a real file rather than inline, I use my own [code snippets component](/blog/docusaurus-snippets), which reads the file at build time so the article can never fall out of sync with it.* Imagine you've already written something like *Dear reader, please create a file on your disk with this content...* and you provide a code block with that content. Later in your article, you ask 'Please edit the file and make this and *please edit the file and add this and that line, here and there*. With `// highlight-next-line`, it's really easy to highlight changes, for instance: **compose.yaml** ```yaml name: kingsbridge services: joomla: image: joomla restart: always ports: - 8080:80 environment: - JOOMLA_DB_HOST=joomladb - JOOMLA_DB_PASSWORD=example # highlight-next-line user: 1000:1000 # highlight-next-line volumes: # highlight-next-line - ./site_joomla:/var/www/html joomladb: image: mysql:8.0.13 restart: always environment: - MYSQL_ROOT_PASSWORD=example # highlight-next-line user: 1000:1000 # highlight-next-line volumes: # highlight-next-line - ./db:/var/lib/mysql ``` You can immediately see where I've made some changes in the file's content.