|
| 1 | +# Authoring Markdown |
| 2 | +Markdown is a document syntax that allows writing documents in plain text that |
| 3 | +can be converted to HTML or other format. The following section contains some |
| 4 | +help about authoring the markdown format. |
| 5 | + |
| 6 | +Basics about markdown [markdown basics](https://daringfireball.net/projects/markdown/basics) |
| 7 | + |
| 8 | +Sometimes you might find a guide to markdown and some formating in it won't work |
| 9 | +with info.arxiv.org. That is becasue the tool used for info.arixv.org supports |
| 10 | +[Gruber's markdown syntax](https://daringfireball.net/projects/markdown/syntax) |
| 11 | +and not all the extensions that exist. |
| 12 | + |
| 13 | +## Links |
| 14 | +Both absolute and relative links work. You can add a link in |
| 15 | +``foo/index.md`` to ``foo/baz.md`` with either ``[click this absolute |
| 16 | +link](/foo/baz.md)`` or ``[click this relative |
| 17 | +link](baz.md)``. Relative links assist in movig directories of pages |
| 18 | +around since a whole subdirectory can be moved and if all the pages in |
| 19 | +it have relative links then those will not break. Absolute links |
| 20 | +assist in moving pages around since the links on a single page do not |
| 21 | +break if a single page is moved. |
| 22 | + |
| 23 | +You can put static files in the same directory structure. If the page |
| 24 | +``specifics/coolstory.md`` has an image tag like |
| 25 | +````, this will get rendered as |
| 26 | +``https://some.site/specifics/impressive.png``. |
| 27 | + |
| 28 | +Only ``.md`` (markdown) files will be treated like pages. Everything |
| 29 | +else is won't get rendered like a page (fancy headers, etc). |
| 30 | + |
| 31 | +Inside of your ``.md`` files, you can add some front-matter. For example, |
| 32 | +if you want the title in the browser tab and breadcrumbs to be different from |
| 33 | +whatever is in the content of the page, you could do: |
| 34 | + |
| 35 | +```markdown |
| 36 | +--- |
| 37 | +title: This is the title that I like in the browser tab |
| 38 | +--- |
| 39 | +# This is the title that gets displayed as an H1 on the page. |
| 40 | + |
| 41 | +Bacon ipsum dolor sit amet... |
| 42 | +``` |
| 43 | + |
| 44 | +The first H1 tag will be used as the name of the page in navigtion. |
| 45 | + |
| 46 | + |
| 47 | +## Templates, CSS, JS |
| 48 | + |
| 49 | +# Style options for markdown pages |
| 50 | + |
| 51 | +Use the following css are already in the CSS used by the arxiv-docs pages. |
| 52 | + |
| 53 | +To clear a float use a single ``#`` (an empty header) on its own line. |
| 54 | + |
| 55 | + |
| 56 | +## Images |
| 57 | + |
| 58 | +Note that more than one class can be applied to an image. |
| 59 | + |
| 60 | +- make an image 100% width of content area : |
| 61 | +``` |
| 62 | +{.mkd-img-full} |
| 63 | +``` |
| 64 | +- make an image 60% width of content area (100% on mobile) and center it: |
| 65 | +``` |
| 66 | +{.mkd-img-60} |
| 67 | +``` |
| 68 | +- make a small thumbnail image: |
| 69 | +``` |
| 70 | +{.mkd-img-thumb} |
| 71 | +``` |
| 72 | +- add a grey border: |
| 73 | +``` |
| 74 | +{.mkd-img-border} |
| 75 | +``` |
| 76 | +- float an image left and make it 50% width: |
| 77 | +``` |
| 78 | +{.mkd-img-left} |
| 79 | +``` |
| 80 | +- float an image right and make it 50% width: |
| 81 | +``` |
| 82 | +{.mkd-img-right} |
| 83 | +``` |
| 84 | +- place two images side by side, each 50% width of content area (will stack at 100% width on mobile), with borders: |
| 85 | +``` |
| 86 | +{.mkd-img-left .mkd-img-border} |
| 87 | +{.mkd-img-left .mkd-img-border} |
| 88 | +``` |
| 89 | + |
| 90 | +## Ordered Lists |
| 91 | +The following styles will be automatically applied to any ordered lists, or |
| 92 | +ordered lists within a blockquote, on your page. A normal ordered list will |
| 93 | +produce a condensed list of items separated horizontally by some padding and a |
| 94 | +red bullet. Enclosing the ordered list within a blockquote will produce a |
| 95 | +2-column list of bordered items with box shadows. Stacks to a single column on |
| 96 | +mobile. |
| 97 | + |
| 98 | +### Syntax for Ordered List |
| 99 | +#### plain ordered list: |
| 100 | +``` |
| 101 | +1. item goes here |
| 102 | +1. another item here |
| 103 | +1. final list item |
| 104 | +``` |
| 105 | +#### ordered list within a blockquote: |
| 106 | +``` |
| 107 | +> 1. item goes here |
| 108 | +> 1. another item here |
| 109 | +> 1. final list item |
| 110 | +``` |
| 111 | + |
| 112 | +## Unordered Lists within a Blockquote |
| 113 | +The following styles will be automatically applied to any unordered lists within a blockquote on your page. |
| 114 | + |
| 115 | +### Syntax for Unordered Lists within Blockquote |
| 116 | +``` |
| 117 | +> - First item |
| 118 | +> - This is a second item |
| 119 | +> - Third item here |
| 120 | +``` |
| 121 | + |
| 122 | +## Blockquotes |
| 123 | +Use the following styles to add a subtle box-shadow around some content. |
| 124 | + |
| 125 | + |
| 126 | +### Syntax for Blockquotes |
| 127 | +``` |
| 128 | +> This content will appear in a blockquote. |
| 129 | +> So will this line. Be sure to add a carrot to each line in a blockquote even... |
| 130 | +> |
| 131 | +> ... blank lines. |
| 132 | +``` |
| 133 | + |
| 134 | +## CSS for a page |
| 135 | +See [mkdocs-material additional CSS](https://squidfunk.github.io/mkdocs-material/customization/#additional-css) |
| 136 | + |
| 137 | + |
| 138 | +## Left Nagivation Bar |
| 139 | +Currently using custom nav bar config: |
| 140 | +https://pypi.org/project/mkdocs-literate-nav/ |
| 141 | +Change the nav by editing /source/SUMMARY.md |
| 142 | + |
| 143 | +# Advanced topics |
| 144 | + |
| 145 | +`arxiv-docs` uses |
| 146 | +[mkdocs-material](https://squidfunk.github.io/mkdocs-material) which |
| 147 | +is theme for mkdocs. For information about customizing themes, CSS or |
| 148 | +JS see: |
| 149 | + |
| 150 | +https://squidfunk.github.io/mkdocs-material/customization/ |
| 151 | + |
| 152 | +## Where can I find more about mkdocs-material? |
| 153 | +See [mkdocs-material/customization](https://squidfunk.github.io/mkdocs-material/customization/) |
| 154 | + |
| 155 | +## Redirects |
| 156 | + |
| 157 | +Redirect from inside mkdocs can be done with HTML pages. Mkdocs will |
| 158 | +pass through .html files unchanged. |
| 159 | + |
| 160 | +Say you wanted to redirect from /xyz.html to /about/donate.html, then put this |
| 161 | +at `source/xyz.html`: |
| 162 | + |
| 163 | +``` |
| 164 | + <!DOCTYPE HTML> |
| 165 | + <meta charset="UTF-8"> |
| 166 | + <meta http-equiv="refresh" content="1; url=/about/donate.html"> |
| 167 | + <script> |
| 168 | + window.location.href = "/about/donate.html" |
| 169 | + </script> |
| 170 | + <title>Redirect</title> |
| 171 | + If you are not redirected automatically, follow the <a href='/about/donate.html'>link</a> |
| 172 | +``` |
| 173 | + |
| 174 | +Note that the URL to redirect to should be relative if it is in mkdocs |
| 175 | +but if it is not in mkdocs, it should be absolute. That is, for |
| 176 | +https://info.arxiv.org/cheese.html -> |
| 177 | +https://info.arxiv.org/onions.html use a relative URL of |
| 178 | +`/onions.html`. But for a URL outside of info.arxiv.org like |
| 179 | +https://info.arxiv.org/corr/subjectclasses -> |
| 180 | +https://arxiv.org/archive/cs you need to use the full URL with the |
| 181 | +hostname. |
| 182 | + |
| 183 | +Redirects from /about to |
| 184 | +/about/index.html are handled by GCP buckets that are served as a |
| 185 | +static web site. See |
| 186 | +https://cloud.google.com/storage/docs/static-website |
| 187 | + |
| 188 | +To get a directory to redirect, ex. /corr/subjectclasses -> |
| 189 | +https://arxiv.org/archive/cs you need to create the directory and put |
| 190 | +an index.html that will do the redirect. |
| 191 | + |
| 192 | +Redirects from https://info.arxiv.org/about/contact to |
| 193 | +https://info.arxiv.org/about/contact.html are handled by javascript in |
| 194 | +`overrides/404.html` |
| 195 | + |
| 196 | +## How to handle 'Missing end of comment tag'? |
| 197 | +As of 2022-09 the macro plugin for mkdocs is disabled and this should |
| 198 | +not be a problem. It was difficult to track down so I'm leaving this in. |
| 199 | + |
| 200 | +When using mkdocs and the macros plug in you can get a stack grace |
| 201 | +with a Jinja error like message "Missing end of comment tag". This is |
| 202 | +often due to LaTeX or code samples with text like `{% raw %} "{{?}}" |
| 203 | +{% endraw %}`. |
| 204 | + |
| 205 | +See the [mkdocs-macros docs](https://mkdocs-macros-plugin.readthedocs.io/en/latest/advanced/#code-blocks-containing-similar-languages) for several ways to work around this. |
0 commit comments