![The Code Chip](https://cdn.slatesource.com/0/5/5/055541e9-188c-47e5-8f04-c7b8249f07a5.webp)

# The Code Chip

- [Made in Slatesource](https://slatesource.com/@steph/the-code-chip)
- By [Steph](https://slatesource.com/@steph)
- Created on Jul 19, 2026

**16** languages in the dropdown

## The CodeCode ChipChip

A blockblock of sourcesource, highlightedhighlighted, with lineline numbersnumbers and a copycopy buttonbutton. It is the leastleast surprisingsurprising chipchip on the platformplatform and the oneone with the mostmost interestinginteresting edgesedges, becausebecause codecode is the oneone kindkind of texttext that carescares deeplydeeply about characterscharacters the restrest of the formatformat treatstreats as punctuationpunctuation.

## HereHere Is the ChipChip, RenderingRendering ItselfItself

The blockblock belowbelow is a CodeCode chipchip. What it containscontains is the JavaJava classclass that turnsturns a chextchext blockblock into a CodeCode chipchip. ThereThere is no tricktrick to it: the entireentire builderbuilder is twotwo assignmentsassignments and a returnreturn.

java

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

```
@Component
public class CodeChipBuilder extends ChipBuilderSupport<PayloadCodeChip> {

  @Override
  public boolean supports(@NonNull String type) {
    return "CODE".equals(type);
  }

  @Override
  @NonNull
  public BuildResult<PayloadCodeChip> build(
      @NonNull ParsedBlock block, @NonNull ParseContext context, int rowIndex) {
    var payload = new PayloadCodeChip();
    payload.setCode(String.join("\n", block.lines()));
    var language = block.chipEdits().get("language");
    if (language != null) {
      payload.setLanguage(language);
    }
    return validated(chip("CODE", "FULL", rowIndex, payload), block.startLine());
  }
}
```

Most builders run their lines through a helper that merges trailing backslashes into line continuations. This one deliberately does not, because a backslash at the end of a line means something in almost every language a person would paste here.

## The ParserParser Will EatEat Your CommentsComments

This is the sharpsharp edgeedge and it deservesdeserves the toptop of the listlist ratherrather than a footnotefootnote. The chextchext blockblock parserparser dropsdrops any lineline beginningbeginning with twotwo forwardforward slashesslashes, and it does so beforebefore any chipchip builderbuilder seessees the contentcontent. ThereThere is no exceptionexception for CodeCode blocksblocks and no escapeescape sequencesequence. PastePaste a Go filefile with a packagepackage commentcomment at the toptop and the commentcomment is simplysimply gonegone from the publishedpublished pagepage, with no warningwarning and no diagnosticdiagnostic.

## The UndocumentedUndocumented WorkaroundWorkaround

The parserparser stripsstrips trailingtrailing whitespacewhitespace from eacheach lineline but nevernever leadingleading whitespacewhitespace, so the commentcomment testtest only matchesmatches at columncolumn zerozero. IndentIndent the commentcomment by a singlesingle spacespace and it survivessurvives intactintact. That is a realreal fixfix and an embarrassingembarrassing oneone, and the factfact that it worksworks is currentlycurrently writtenwritten downdown nowherenowhere exceptexcept herehere.

go

1

2

3

4

5

6

7

8

9

```
package main

import "fmt"

 // this comment is indented one space, which is the only reason you can read it
func main() {
	fmt.Println("hello")
}
```

## The ColonColon ProblemProblem Is WorseWorse

A lineline startingstarting with a coloncolon at columncolumn zerozero opensopens a newnew chipchip. InsideInside a CodeCode blockblock that does not just loselose a lineline, it truncatestruncates the blockblock and the remainderremainder is discardeddiscarded: its markermarker matchesmatches no chipchip typetype, so the parserparser recordsrecords an errorerror and dropsdrops it. The contentcontent does not resurfaceresurface anywhereanywhere. CSSCSS is the obviousobvious casualtycasualty, becausebecause a rulerule that opensopens on a pseudo-selectorpseudo-selector at the startstart of a lineline endsends the snippetsnippet therethere. So do assemblyassembly labelslabels and a fairfair amountamount of YAMLYAML. UnlikeUnlike the commentcomment casecase therethere is no workaroundworkaround, becausebecause indentingindenting CSSCSS to publishpublish it is not a thingthing anyoneanyone shouldshould be askedasked to do. This is a genuinegenuine unfixedunfixed limitationlimitation of the formatformat ratherrather than a quirkquirk of the chipchip.

## OneOne MoreMore, SmallerSmaller

If the lastlast lineline of your snippetsnippet is a barebare pipepipe charactercharacter, it is removedremoved. A singlesingle pipepipe on its ownown lineline is the format'sformat's wayway of sayingsaying this chipchip connectsconnects visuallyvisually to the nextnext oneone, and the CodeCode builderbuilder inheritsinherits that rulerule alongalong with everythingeverything elseelse.

Languages offered in the picker

16

Grammars actually shipped in the bundle

192

Maximum code length

65535 characters

Language auto-detection

never built

Revisions since launch

0

## SixteenSixteen OfferedOffered, OneOne HundredHundred and Ninety-TwoNinety-Two ShippedShipped

The highlighterhighlighter is importedimported as the fullfull librarylibrary ratherrather than a corecore buildbuild with selectedselected grammarsgrammars registeredregistered on toptop. That meansmeans everyevery visitorvisitor downloadsdownloads supportsupport for a hundredhundred and ninety-twoninety-two languageslanguages so that sixteensixteen can appearappear in a dropdowndropdown, and the server-sideserver-side rendererrenderer loadsloads the samesame bundlebundle. It is a realreal costcost and it alsoalso meansmeans that addingadding C, RubyRuby, YAMLYAML, MarkdownMarkdown, DockerfileDockerfile or diffdiff is a oneone filefile changechange with no bundlebundle impactimpact at all, sincesince the grammarsgrammars are alreadyalready therethere. That has not been donedone, whichwhich is harderharder to defenddefend than the bundlebundle sizesize.

## HighlightedHighlighted TwiceTwice, IdenticallyIdentically

HighlightingHighlighting runsruns synchronouslysynchronously in the componentcomponent bodybody with no effecteffect hookhook aroundaround it, so it executesexecutes duringduring serverserver renderingrendering and againagain duringduring hydrationhydration. That soundssounds wastefulwasteful and it is what makesmakes the chipchip safesafe: the samesame purepure functionfunction over the samesame inputinput producesproduces byte-identicalbyte-identical markupmarkup on bothboth sidessides, so therethere is no hydrationhydration mismatchmismatch and no flashflash of unhighlightedunhighlighted codecode. A crawlercrawler that nevernever runsruns JavaScriptJavaScript stillstill receivesreceives colouredcoloured, structuredstructured sourcesource.

## It Is AlwaysAlways DarkDark

No highlighthighlight.js stylesheetstylesheet is importedimported. The tokentoken colourscolours are about fourteenfourteen hand-writtenhand-written rulesrules in a palettepalette closeclose to MaterialMaterial PalenightPalenight, with the containercontainer hardcodedhardcoded to a near-blacknear-black backgroundbackground. ThereThere is no lightlight modemode handlinghandling and no themetheme variablevariable otherother than the accentaccent colourcolour on the languagelanguage labellabel and the copycopy buttonbutton. On a lightlight themedthemed slateslate the CodeCode chipchip staysstays a darkdark slabslab in the middlemiddle of the pagepage. Some peoplepeople readread that as deliberatedeliberate. It was not.

The Wishlist Entry, Scored

75%

Syntax highlighting

Line numbers

Copy to clipboard

Language detection: never built, an unknown language silently renders as plain text

## TwoTwo ThingsThings StillStill WrongWrong in the RenderingRendering

The lineline numbernumber guttergutter sitssits insideinside the horizontallyhorizontally scrollingscrolling containercontainer ratherrather than pinnedpinned besidebeside it, so scrollingscrolling rightright on a longlong lineline slidesslides the numbersnumbers off the screenscreen. And therethere is no maximummaximum heightheight anywhereanywhere, whichwhich meansmeans a chipchip approachingapproaching the sixty-fivesixty-five thousandthousand charactercharacter limitlimit rendersrenders at fullfull heightheight and takestakes the pagepage layoutlayout with it. NeitherNeither is hardhard to fixfix. BothBoth are stillstill therethere.

## The HTMLHTML That Is CalledCalled XMLXML

The languagelanguage pickerpicker offersoffers HTMLHTML and storesstores the valuevalue as xmlxml, becausebecause that is what the highlighterhighlighter callscalls it. WritingWriting the languagelanguage as htmlhtml in a texttext filefile storesstores htmlhtml, whichwhich the highlighterhighlighter alsoalso acceptsaccepts as an aliasalias. BothBoth highlighthighlight correctlycorrectly and the headerheader labellabel aboveabove the blockblock readsreads differentlydifferently dependingdepending on whichwhich wayway the chipchip was createdcreated. The aliasingaliasing liveslives insideinside the highlighterhighlighter, not in this codebasecodebase, and it does not roundround triptrip.

Dates31.03.2026 – 15.07.2026

31.03.2026Shipped, alongside the Goal chip, in a single release

31.03.2026

15.07.2026Touched twice since, both cosmetic

15.07.2026

## ShippedShipped and LeftLeft AloneAlone

The CodeCode chipchip wentwent out on 31 MarchMarch 20262026 and has had no revisionrevision sincesince. EverythingEverything describeddescribed aboveabove as a roughrough edgeedge is a roughrough edgeedge that is livelive rightright nownow. A featurefeature pagepage that only listedlisted the partsparts that wentwent wellwell wouldwould be shortershorter and considerablyconsiderably lessless usefuluseful.

> Code is the one kind of text that cares which column you started in.

[Every chip type, side by side](https://slatesource.com/chips?utm_source=slatesource)