Updated code block annotation usage

This commit is contained in:
squidfunk 2021-07-18 17:57:45 +02:00
parent 4f15e6e2d5
commit e30b814c57
6 changed files with 21 additions and 7 deletions

View File

@ -25,7 +25,7 @@ contents:
=== "Material for MkDocs" === "Material for MkDocs"
``` { .yaml .annotate } ``` yaml
name: ci # (1) name: ci # (1)
on: on:
push: push:

View File

@ -223,7 +223,14 @@ to the corresponding tooltip.
In order to opt-in to annotation support, a slightly different syntax is In order to opt-in to annotation support, a slightly different syntax is
required just add the respective [language short code][17] and the `.annotate` required just add the respective [language short code][17] and the `.annotate`
class, after the three backticks. class, after the three backticks. Alternatively, if you want to enable annotations
globally, add the following to `mkdocs.yml`:
``` yaml
theme:
features:
- content.code.annotate
```
Note that annotations can be __placed anywhere__ in a code block where a comment Note that annotations can be __placed anywhere__ in a code block where a comment
for the language can be placed, which for JavaScript is `// (1)` and for the language can be placed, which for JavaScript is `// (1)` and
@ -232,7 +239,7 @@ for the language can be placed, which for JavaScript is `// (1)` and
_Example_: _Example_:
```` markdown ```` markdown
``` { .js .annotate } ``` js
document$.subscribe(function() { // (1) document$.subscribe(function() { // (1)
var tables = document.querySelectorAll(/* (2) */ "article table") var tables = document.querySelectorAll(/* (2) */ "article table")
tables.forEach(function(table) { tables.forEach(function(table) {
@ -247,7 +254,7 @@ document$.subscribe(function() { // (1)
_Result_: _Result_:
``` { .js .annotate } ``` js
document$.subscribe(function() { // (1) document$.subscribe(function() { // (1)
var tables = document.querySelectorAll(/* (2) */ "article table") var tables = document.querySelectorAll(/* (2) */ "article table")
tables.forEach(function(table) { tables.forEach(function(table) {

View File

@ -72,7 +72,13 @@ Add the following to `mkdocs.yml`:
``` yaml ``` yaml
extra: extra:
consent: true consent:
title: Cookie consent
description: >
We use cookies to recognize your repeated visits and preferences, as well
as to measure the effectiveness of our documentation and whether users
find what they're searching for. With your consent, you're helping us to
make our documentation better.
``` ```
When a user first visits your site, a cookie consent form is rendered: When a user first visits your site, a cookie consent form is rendered:

View File

@ -276,7 +276,7 @@ When a user enters a query into the search box, the query is pre-processed
before it is submitted to the search index. Material for MkDocs will apply the before it is submitted to the search index. Material for MkDocs will apply the
following transformations, which can be customized by [extending the theme][20]: following transformations, which can be customized by [extending the theme][20]:
``` { .ts .annotate } ``` ts
export function defaultTransform(query: string): string { export function defaultTransform(query: string): string {
return query return query
.split(/"([^"]+)"/g) /* (1) */ .split(/"([^"]+)"/g) /* (1) */

View File

@ -75,7 +75,7 @@ If you're using versioning, you might want to display a warning when the user
visits any other version than the latest version. Using [theme extension][8], visits any other version than the latest version. Using [theme extension][8],
you can [define the `outdated` block][9]: you can [define the `outdated` block][9]:
``` { .html .annotate } ``` html
{% block outdated %} {% block outdated %}
You're not viewing the latest version. You're not viewing the latest version.
<a href="{{ '../' ~ base_url }}"> <!-- (1) --> <a href="{{ '../' ~ base_url }}"> <!-- (1) -->

View File

@ -51,6 +51,7 @@ theme:
# Default values, taken from mkdocs_theme.yml # Default values, taken from mkdocs_theme.yml
language: en language: en
features: features:
- content.code.annotate
- content.tabs.link - content.tabs.link
# - navigation.instant # - navigation.instant
- navigation.sections - navigation.sections