Amplenote offers a built-in code editor that can be invoked within any note. Creating a code block is possible by clicking the "Code block" icon in Notes view, or by entering triple backticks aka ``` on a new line. The advantage of invoking the code block editor via triple-backticks is that it works in Jots, Notes, Tasks and Calendar mode, not just Notes view mode. Triple backticks can even allow you to write formatted code within a Rich Footnote.
linkFormatting code with the code block editor (built-in IDE)
Since you figure to be a fairly technical user to have found your way to this section, you might know what it means when we explain that "Amplenote's code block editor is an in-note instance of CodeMirror." CodeMirror is the text editor used by Chrome Dev Tools, Obsidian.md, CodePen, Adobe Brackets, Firefox Developer Tools, and jsfiddle. If you have used any of these environments to write or edit code, you are generally familiar with Amplenote's code editor.
It looks like this:
Note that the first line, specifying the language (
linkLanguages supported: insert on first line to format a code block
The editor can be configured to perform syntax highlighting and bracket matching for a number of different languages:
Include any of those words in the first line of your code block, and the remainder of the code block will apply syntax highlighting and bracket-matching rules applicable to the language you chose. So for example, you could preface a code block with
# python or
// C or
<!-- html -->.
Note that you can also specify as your language definition the styled block text formats described at the end of this page:
All language tokens are case-insensitive. It doesn't matter if you refer to them in lower-case, upper-case or mixed case.
linkConfiguring language used
To explicitly set the language of your code, mention one of the languages in that list in the first line of your code block (e.g., if you're writing HTML the first line of your code block might be
<-- html -->). The editor block will perform a non-case-sensitive search, and if it discovers the name of a programming language from the list known languages it will start using that language for the syntax highlighting for your block. After you have prescribed which language to use, that language will be "remembered" unless/until you specify some other language on the first line of the code block.
linkOther code-editing features supported
Our CodeMirror instance is configured to support a number of features that make it easier to write code (i.e., for Amplenote Plugins, which are a special kind of code blocks within a note):
Automatic bracket/element closing. When you open a curly brace, CodeMirror will automatically create a closing bracket for you. If you create an HTML element, CodeMirror will automatically create a closing element for you.
Automatic language detection. If you paste in a code block that uses a functional signature specific to a certain language, the correct language will be selected without specifically entering it as the first line of the code block
Syntax highlighting. When moving your cursor over a symbol or element related to another (like the end bracket of a bracket set), the related element will be highlighted.
Retain tab depth within method/function. When you indent code within a function/method, that indent level will be retained through Enter press until you close the method/function.
Code formatting retained in published and embedded notes. Colored syntax formatting is retained even for public, non-logged-in viewers of notes that are published or embedded.
Copy entire code block. Hover on a code block and you'll get an icon in the upper right that can be clicked to copy the entire contents of a code block. Very useful if you plan to publish a blog or public wiki where developers may want to copy from the examples you provide.
linkExtending a code block with empty lines
Normally if you press enter twice at the end of a code block, we interpret that to mean that you want to escape the code block, so we exist the block and remove the final (empty) line. However, if you want to extend your code block with multiple blank lines at the bottom, hold "Shift" as you press enter. The code block will not exit while you're holding Shift, even if you press Enter to create many blank lines.
linkUsing code block editor for styled block text
In addition to using the code editor for writing code, you can also use it for creating text with gradients that spark interest. Note that, since this these special text blocks are composed of literal text, they will overflow their text block to the right unless you use Enter where you want the line to wrap.
"Rainbow1" is a top-to-bottom gradient that cycles through blues and grays.
"Rainbow2" is a top-to-bottom gradient that traverses an orange palette.
"Rainbow3" is a left-to-right gradient that traverses from green to blue.
"Rainbow4" is an orange-and-blue gradient that descends at a 45 degree angle:
"Rainbow5" is an animating gradient that uses up quite a bit of processing power, so should be used sparingly: