ampproject / ampproject/amp.dev
Spacing issues in examples
- Dominant language
- HTML
- Stars
- 600
- Forks
- 675
- PR merge metrics
- No merged PRs in 30d
Description
Working on [the `` examples page](https://amp.dev/documentation/examples/components/amp-script), I've hit a couple of snags:
### 1. Pretty-printing ###
I find it confusing that HTML attributes for `` tags get automatically pretty-printed so that each is on a separate line - as that tends to mush into the JavaScript that people will need to focus on. @sebastianbenz showed me that I could defeat this behavior by adding `<script>` to `BEAUTIFY_OPTIONS.unformatted[]` in `DocumentParser.js'`:
```javascript
const BEAUTIFY_OPTIONS = {
indent_size: 2,
"wrap_attributes": "force",
unformatted: ['noscript', 'style', 'head', 'script'],
'indent-char': ' ',
'no-preserve-newlines': '',
'extra_liners': []
};
```
However, this is having no effect.
### 2. Indentation ###
The pretty-printing normally works beautifully for JavaScript in examples. However, I'm having spacing problems in cases where I need to wrap the whole example in a `<div>` - since AFAIK a single example can't have multiple parent tags, but needs to have a single parent tag, which then gets magically removed.
So, this code:
```html
<div>
<amp-script layout="fixed-height" height="36" script="time-script" class="sample">
<div>The time is: <span id="time"></span></div>
</amp-script>
<script id="time-script" type="text/plain" target="amp-script">
const fetchCurrentTime = async () => {
const response = await fetch('<% hosts.platform %>/documentation/examples/api/time');
const data = await response.json();
const div = document.getElementById('time');
div.textContent = data.time;
}
fetchCurrentTime();
```
gets formatted like this:

Contributor guide
Assessment
This issue has not been assessed yet.