1--- 2title: 'Markdown' 3linkTitle: 'Markdown' 4--- 5 6This site is build with [Hugo](https://gohugo.io/) and 7[Docsy](https://www.docsy.dev/). 8 9Any file you put under `/site/` that has the extension `.md` will be processed 10as Markdown. All other files will be served directly. For example, images can be 11added and they will be served correctly and referenced from within Markdown 12files. 13 14When preparing for a code review of site docs you can get a preview of how the 15page will render by visiting the [Gerrit issue](https://skia-review.googlesource.com/c/skia/+/862957/####) 16and clicking the eye icon to the left of the file: 17 18<img src="../eye_icon.png" style="display: inline-block;" /> 19 20See the [Docsy documentation](https://www.docsy.dev/docs/) for more details on 21how to configure and use docsy. For example the 22[Navigation](https://www.docsy.dev/docs/adding-content/navigation/) section 23explains what frontmatter needs to be added to a page to get it to appear in the 24top navigation bar. 25 26## Frontmatter 27 28Each page needs a frontmatter section that provides information on that page. 29For example: 30 31``` 32--- 33title: 'Markdown' 34linkTitle: 'Markdown' 35--- 36``` 37 38This is true for both Markdown and HTML pages. See 39[the Docsy documentation on frontmatter](https://www.docsy.dev/docs/adding-content/content/#page-frontmatter) 40for more details. 41 42## Styling And Icons 43 44Docsy supports both 45[Bootstrap](https://getbootstrap.com/docs/5.0/getting-started/introduction/) and 46[Font-Awesome](https://fontawesome.com/). Check out their documentation for what 47they offer. 48 49Bootstrap contains many classes that allow you to avoid setting styles via CSS. 50For example, just using classes, we can change the font, the padding, and the 51color: 52 53```html 54<p class="font-monospace p-2 text-danger">This is in monospace</p> 55``` 56 57Which renders as: 58 59<p class="font-monospace p-2 text-danger">This is in monospace</p> 60 61## Diagrams 62 63[Mermaid](https://mermaid-js.github.io/mermaid/#/) diagrams are enabled, so 64this: 65 66````markdown 67```mermaid 68graph TD; 69 A-->B; 70 A-->C; 71 B-->D; 72 C-->D; 73``` 74```` 75 76Gets rendered as: 77 78```mermaid 79graph TD; 80 A-->B; 81 A-->C; 82 B-->D; 83 C-->D; 84``` 85 86## Code Snippets 87 88To get syntax highlighting in code snippets you need to specify the language, 89which is specified after the first code fence, for example this is how you would 90show HTML markup: 91 92```` 93```html 94<p class="font-monospace p-2 text-danger">This is in monospace</p> 95``` 96```` 97 98## Configuration 99 100The Hugo configuration file is `config.toml` located in the site directory. 101
