Wrapping Code Blocks

As of 27-Aug-2024, Webflow's code blocks do not wrap.

When you're dropping in something like a regex, which cannot have line breaks in it, it creates some UX inconveniences.

Goals

• We want to be able to wrap code blocks like this;

Live example on https://sygnal.webflow.io/lessons/validating-emails

• Control by syntax type, e.g. Plain Text, JavaScript... which is set for each block

Ideally;

• Ideally, block-specific control even within rich text elements

Ideas;

• Usurp line numbers as a wrapping control?

Usage Notes

wfu-codeblock-wrap = ( no value )

Place this on any Code Block, or on a Rich Text Block to affect the Code Block elements it contains.

After tagging your element, add an Embed in your page with the following code.

<style>
[wfu-codeblock-wrap] code {
  white-space: pre-wrap !important;
}
</style>

To limit to code blocks with a specific language selected, you can add a class to the code selector, see Language Types below for the class name to use.

<style>
[wfu-codeblock-wrap] code.language-javascript {
  white-space: pre-wrap !important;
}
</style>

Future;

In the future we'll support wrapping on language-specific blocks in the SA5 lib directly.

• Specifying a language code will wrap only those languages identified

  • Several can be specified, comma-separated

Language Types

Work-in-progress.

As of 27-Aug-2024 the list below contains the languages supported. In most, the CSS class name applied to the Code Block is the lowercased language name prefixed with language-(name).

You can see this on the <code> element;

A Code Block set to JavaScript, showing lauguage-javascript

Some languages however vary that, for example C++ is classed as language-cpp.

IMPORTANT The list below is a quick attempt to guess what CSS class Webflow will generate as the language codes for each, it has not been verified for many. Use Chrome inspector to double-check.

Use the Code. If you're uncertain, check the course code in Chrome inspector

Original	Lowercase	CSS Class	Code
Arduino	arduino	language-arduino	arduino
Bash	bash	language-bash	bash
Basic	basic	language-basic	basic
BNF	bnf	language-bnf	bnf
C	c	language-c	c
Clojure	clojure	language-clojure	clojure
CoffeeScript	coffeescript	language-coffeescript	coffeescript
Coq	coq	language-coq	coq
C++	c++	language-cpp	cpp
CSS	css	language-css	css
Dart	dart	language-dart	dart
Diff	diff	language-diff	diff
Docker	docker	language-docker	docker
EBNF	ebnf	language-ebnf	ebnf
Elixir	elixir	language-elixir	elixir
Elm	elm	language-elm	elm
Erlang	erlang	language-erlang	erlang
Gherkin	gherkin	language-gherkin	gherkin
GLSL	glsl	language-glsl	glsl
Go	go	language-go	go
Groovy	groovy	language-groovy	groovy
Haskell	haskell	language-haskell	haskell
HTML	html	language-html	html
Java	java	language-java	java
JavaScript	javascript	language-javascript	javascript
JSON	json	language-json	json
Julia	julia	language-julia	julia
Kotlin	kotlin	language-kotlin	kotlin
LaTeX	latex	language-latex	latex
Less	less	language-less	less
Lisp	lisp	language-lisp	lisp
LiveScript	livescript	language-livescript	livescript
LLVM IR	llvm ir	language-llvm-ir	llvm-ir
Lua	lua	language-lua	lua
Makefile	makefile	language-makefile	makefile
Markdown	markdown	language-markdown	markdown
Mathematica	mathematica	language-mathematica	mathematica
MATLAB	matlab	language-matlab	matlab
Nix	nix	language-nix	nix
Objective-C	objective-c	language-objectivec	objectivec
OCaml	ocaml	language-ocaml	ocaml
Perl	perl	language-perl	perl
PHP	php	language-php	php
Plain Text	plain text	language-plaintext	plaintext
PowerShell	powershell	language-powershell	powershell
Prolog	prolog	language-prolog	prolog
Protobuf	protobuf	language-protobuf	protobuf
Python	python	language-python	python
R	r	language-r	r
Reason	reason	language-reason	reason
Ruby	ruby	language-ruby	ruby
Rust	rust	language-rust	rust
Sass	sass	language-sass	sass
Scala	scala	language-scala	scala
Scheme	scheme	language-scheme	scheme
SCSS	scss	language-scss	scss
Shell	shell	language-shell	shell
SQL	sql	language-sql	sql
Swift	swift	language-swift	swift
TypeScript	typescript	language-typescript	typescript
VB.NET	vb.net	language-vbnet	vbnet
Verilog	verilog	language-verilog	verilog
VHDL	vhdl	language-vhdl	vhdl
XML	xml	language-xml	xml
YAML	yaml	language-yaml	yaml

Technical Notes

Must force the <code> element to pre-wrap.