# 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; 

<figure><img src="/files/ATUvFB3rm0WAQkOTAFIN" alt=""><figcaption><p>Live example on <a href="https://sygnal.webflow.io/lessons/validating-emails">https://sygnal.webflow.io/lessons/validating-emails</a></p></figcaption></figure>

* Control by syntax type, e.g. Plain Text, JavaScript... which is set for each block&#x20;

Ideally;

* Ideally, block-specific control even within rich text elements&#x20;

Ideas;&#x20;

* Usurp line numbers as a wrapping control?&#x20;

## 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. &#x20;

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

```html
<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.&#x20;

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

Future;

{% hint style="warning" %}
In the future we'll support wrapping on language-specific blocks in the SA5 lib directly.
{% endhint %}

* Specifying a language code will wrap only those languages identified
  * Several can be specified, comma-separated

## Language Types

*Work-in-progress.*&#x20;

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)`.&#x20;

You can see this on the `<code>` element;

<figure><img src="/files/nQEDL4fPRwJZ0CezTwOq" alt=""><figcaption><p>A Code Block set to JavaScript, showing <code>lauguage-javascript</code></p></figcaption></figure>

Some languages however vary that, for example C++ is classed as `language-cpp`.&#x20;

{% hint style="warning" %}
**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.&#x20;
{% endhint %}

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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://attr.sygnal.com/sa5-richtext/code-blocks/wrapping-code-blocks.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.