# Format code samples for reading on an iPhone

Canonical: https://githtml.com/guides/code-blocks-for-iphone-reading
Published: 2026-09-26
Publisher: WaveTech LLC / gitHtml

Keep code as selectable text, limit examples to the lines needed for the explanation, and contain horizontal scrolling inside the code block. Wrap prose-like output when safe, but preserve meaningful indentation and line structure in source examples. Explain any omitted context so a short mobile sample does not become misleading.

## Separate source from explanation

A code sample should answer a specific question. If a reader needs to find three relevant lines inside a full configuration file, move the surrounding explanation into prose and present the smallest complete example. State the filename, prerequisites, and whether the snippet replaces a whole file or only one section. Those details matter more than ornamental syntax colors.

Use pre and code elements for source text, escaping HTML characters in the sample. A screenshot of code prevents reliable selection and can become unreadable when scaled down. Keep line numbers outside the copied text if you include them at all. For short examples, explaining the important lines in the following paragraph is often cleaner.

## Choose wrapping deliberately

Horizontal scrolling preserves exact line structure, which can matter for shell commands, structured data, and aligned output. Soft wrapping makes long lines easier to read but can obscure where one command ends. Choose per example instead of applying one rule indiscriminately. In either case, the surrounding article should continue to fit the screen.

For a long command, consider showing a documented multiline form when the language supports it, along with a note about the continuation syntax. Do not insert visual line breaks that change behavior. For logs or explanatory pseudocode, wrapping may be preferable because exact whitespace is less central. Label pseudocode clearly so readers do not mistake it for an executable recipe.

## Review the copy and reading paths

A mobile reader may inspect code without executing it, then return later on a computer. Include enough surrounding context to support both uses. Name placeholder values and explain which ones must change. Never place a realistic secret or private endpoint into an example merely to make it look complete.

1. Read the longest line without moving the entire page horizontally.
2. Copy a sample into a plain-text editor and inspect its characters.
3. Check whether indentation, placeholders, and omitted lines remain understandable without syntax highlighting.

````css
pre {
  max-width: 100%;
  overflow-x: auto;
  padding: 1rem;
}
pre code { font: 0.9rem/1.55 ui-monospace, monospace; }
.output { white-space: pre-wrap; overflow-wrap: anywhere; }
````

## Sources and further reading

- [MDN: white-space](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space)

## Related guides

- [Read a repository HTML document comfortably on iPhone](https://githtml.com/guides/read-repository-html-on-iphone)
- [Build a single-file HTML document that travels well](https://githtml.com/guides/portable-single-file-html-document)
- [Set a mobile viewport for an HTML report](https://githtml.com/guides/mobile-viewport-for-html-reports)
- [Add useful section navigation to a long HTML document](https://githtml.com/guides/table-of-contents-for-long-html)

Editorial approach: https://githtml.com/guides/about