Skip to content

docs: update styling.md on how to display code snippets#461

Open
leedoughty wants to merge 3 commits intoankitects:mainfrom
leedoughty:add-code-snippets-section
Open

docs: update styling.md on how to display code snippets#461
leedoughty wants to merge 3 commits intoankitects:mainfrom
leedoughty:add-code-snippets-section

Conversation

@leedoughty
Copy link
Contributor

This PR adds documentation on how to format code snippets in Anki cards. The new section covers keyboard shortcuts for entering HTML mode and provides examples for both inline code and code blocks. This will help users, especially those in IT/engineering fields, properly display code in their flashcards.

Closes #456

Copy link
Contributor

@GithubAnon0000 GithubAnon0000 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aside from the things I mentioned in the comments:

In the future we could add a section about making syntax highlighting work. E.g. I use highlight.js in my cards and it works flawlessly on AnkiDroid and Anki (other clients untested, but they should work fine as well) and doesn't need an addon or platform specific APIs.

- On Windows, press <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>X</kbd>
- On a Mac, press <kbd>Command</kbd>+<kbd>Shift</kbd>+<kbd>X</kbd>

**Inline code**\
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
**Inline code**\
### Inline code

Using a title also makes it linkable. I think this is prefered.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated.

<code>console.log("Hello World!");</code>
```

**Code blocks**\
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
**Code blocks**\
### Code blocks

Using a title also makes it linkable. I think this is prefered.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated.

Comment on lines +234 to +237
If you want to include code in your Anki cards, you can use HTML tags to format text as code. To enter HTML mode:

- On Windows, press <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>X</kbd>
- On a Mac, press <kbd>Command</kbd>+<kbd>Shift</kbd>+<kbd>X</kbd>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
If you want to include code in your Anki cards, you can use HTML tags to format text as code. To enter HTML mode:
- On Windows, press <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>X</kbd>
- On a Mac, press <kbd>Command</kbd>+<kbd>Shift</kbd>+<kbd>X</kbd>
If you want to include code in your Anki cards, you can use HTML tags to format
text as code. For that, you need to open the
[HTML view](https://docs.ankiweb.net/editing.html#editing-features).

(lines where broken as well to fit the 80 column limit)

I don't think we should include this at all. It should be a link to https://docs.ankiweb.net/editing.html#editing-features instead (though that section could use rewritting as well). You can add the keyboard shortcuts in the link I posted above at the right paragraph if you want to document them. It should also mention Linux in that case, like so:

- On Windows and Linux, press <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>X</kbd>
- On a Mac, press <kbd>Command</kbd>+<kbd>Shift</kbd>+<kbd>X</kbd>

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, that makes sense. I’ve updated the section based on your suggestions.

Regarding adding the shortcuts to the editing features section, it looks like there aren't many shortcuts documented there at the moment. Since Anki already shows the shortcut when you hover over a button, it might not be necessary to add them right now. Perhaps they could be included as part of a broader rewrite of that section later on.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add example for displaying code blocks in cards

2 participants