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.

link Formatting 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:

// Javascript
{
  // --------------------------------------------------------------------------------------
  constants: {
    defaultSystemPrompt: "You are a helpful assistant.",
    pluginName: "FooPlug",
    strictReplacePromptEms: [ "lookup", "sum", "thesaurus" ],
    tokenReplacePrompts: {
      code: `Provide a snippet of source code (in either Javascript, Python or Ruby).`,
      lolz: `Provide up to 100 words of entertaining, humorous content that is a little bit edgy.`,
      sum: `Calculate the sum of the table cells in the row or column of the token.`,
    },
  },
 
  // --------------------------------------------------------------------------------------
  insertText: {
    lolz: async app => (await this._contextAwarePrompt(app, "lolz")),
    code: async app => (await this._contextAwarePrompt(app, "code")),
    complete: async app => (await this._contextAwarePrompt(app, "complete")),
    lookup: async app => (await this._contextAwarePrompt(app, "lookup")),
    sum: async app => (await this._contextAwarePrompt(app, "sum"))
  },
 
  // --------------------------------------------------------------------------------------
  // https://www.amplenote.com/help/developing_amplenote_plugins#noteOption
  noteOption: {
    "revise": async function(app, noteUUID) {
      const instruction = await app.prompt("How should this note be revised?");
      if (!instruction) return;
 
      const note = await app.notes.find(noteUUID);
      const noteContent = await note.content();
      const result = await this._callOpenAI(app, "reviseContent", [ instruction, noteContent ]);
      const actionIndex = await app.alert(result, {
        actions: [ { icon: "post_add", label: "Insert in note" } ]
      });
      if (actionIndex === 0) {
        note.insertContent(result);
      }
    },
    "summarize": async function(app, noteUUID) {
      const note = await app.notes.find(noteUUID);
      const noteContent = await note.content();
      const result = await this._callOpenAI(app, "summarize", noteContent);
      const actionIndex = await app.alert(result, {
        actions: [ { icon: "post_add", label: "Insert in note" } ]
      });
      if (actionIndex === 0) {
        note.insertContent(result);
      }
    },
  },
}

Note that the first line, specifying the language (// Javascript) can be removed without changing the syntax coloring. It may need to be specified initially, before deleting, if the language you are working in can not be inferred.

link Languages 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:

Javascript

C, C++ and C#

CSS, SCSS

HTML (including HTML that embed Javascript and CSS)

Python

Ruby

Rust

XML

Plain

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 .

Note that you can also specify as your language definition the styled block text formats described at the end of this page:

rainbow1

rainbow2

rainbow3

rainbow4

rainbow5

All language tokens are case-insensitive. It doesn't matter if you refer to them in lower-case, upper-case or mixed case.

link Configuring 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.

link Other 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.

link Extending 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.

link Using 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.

rainbow1 // Left in to show what gradient was used, you can remove this line and rainbow will persist
“Stay away from those people who try to disparage your ambitions. 
Small minds will always do that, 
but great minds will give you a feeling that you can become great too.” 
 
— Mark Twain

"Rainbow2" is a top-to-bottom gradient that traverses an orange palette.

rainbow2 # Left in to show what gradient was used, you can remove this line and coloring will persist
"Nothing in the world can take the place of Persistence. 
Talent will not; nothing is more common than unsuccessful men with talent. 
Genius will not; unrewarded genius is almost a proverb. 
Education will not; the world is full of educated derelicts. 
The slogan 'Press On' has solved and always will solve the problems of the human race." 
 
—Calvin Coolidge

"Rainbow3" is a left-to-right gradient that traverses from green to blue.

rainbow3 # The "rainbow3" token can be removed after initially typing it in
“The pessimist sees difficulty in every opportunity. 
The optimist sees opportunity in every difficulty." — Winston Churchill
 
“If you are working on something that you really care about, you don’t have to be pushed. 
The vision pulls you.” 
— Steve Jobs

"Rainbow4" is an orange-and-blue gradient that descends at a 45 degree angle:

rainbow4
“Your work is going to fill a large part of your life, 
and the only way to be truly satisfied is to do what 
you believe is great work. 
 
And the only way to do great work is to love what you do. 
 
If you haven't found it yet, keep looking. 
Don't settle. 
As with all matters of the heart, you'll know when you find it.” 
— Steve Jobs

"Rainbow5" is an animating gradient that uses up quite a bit of processing power, so should be used sparingly:

rainbow5 
“Some women choose to follow men, and some choose to follow their dreams. 
If you’re wondering which way to go, 
remember that your career will never wake up 
and tell you that it doesn’t love you anymore.” 
— Lady Gaga

Code block & colored block text formatting

linkFormatting code with the code block editor (built-in IDE)

linkLanguages supported: insert on first line to format a code block

linkConfiguring language used

linkOther code-editing features supported