AnkiApp

How to use Source Code Highlighting

AnkiApp can make flashcards that automatically highlight computer source code. Here's a quick guide showing how, for the programming language C#. To use this feature for other languages, change references to "C#" to the language of your choice.

First, create a new deck.

When creating a new deck, there's a menu option to "Change Layout". Clicking that option will bring you to the screen shown below.

This screen lets you alter the Layout for the deck, which determines how cards are displayed.

  1. Delete the existing "front" and "back" fields. To delete a field, right click on it and press the delete icon that appears.
  2. Change the "Front (HTML)" and "Back (HTML)" to look like the ones shown in the screenshot. (<code data-lang="C#">{{code}}</code> for the "code" field,{{FrontSide}}<hr/><div class='meaning'>{{meaning}}</div> for the "meaning" field).
  3. Save the Layout. You'll be returned to the New Deck screen.
  4. Save the Deck. You'll be taken to the New Card screen, shown below.

This screen allows you to create new cards by entering content for the fields available in this deck: "code" and "meaning". The code you type in the "code" field should automatically be highlighted as C# code, in the preview on the right side.