Comments (4)
@shuuji3 @stuartmaxwell Thank you guys for your feedback and I apologize for my ignorance.
from pico.
How about using the standard <pre>
block element, instead of <code>
inline element, for multiple lines of code block?
ref. https://developer.mozilla.org/docs/Web/HTML/Element/pre
from pico.
Yes, @shuuji3 is correct. <pre>
is the correct element to use if you want to preserve whitespace. You can either replace the code
element with a pre
element, or if you need to use code
for some reason, you can wrap your code
element with a pre
element.
Option 1:
<pre>
[
{
"id": "PROD-7LE34802UJ0769203",
"name": "test product",
"description": "test description",
"create_time": "2023-10-11T11:46:02Z"
}
]
</pre>
Option 2:
<pre><code>
[
{
"id": "PROD-7LE34802UJ0769203",
"name": "test product",
"description": "test description",
"create_time": "2023-10-11T11:46:02Z"
}
]
</code></pre>
Note that the pre
element will retain all whitespace, including the line breaks before and after the pre
tags. So you would probably want to use the following to remove the starting and ending line breaks:
<pre>[
{
"id": "PROD-7LE34802UJ0769203",
"name": "test product",
"description": "test description",
"create_time": "2023-10-11T11:46:02Z"
}
]</pre>
from pico.
on a side note, it would be good to add it to the doc as well
from pico.
Related Issues (20)
- Image element attribute height is overridden
- Dialog height on mobile devices (svh vs vh)
- A bug with the name of the color Fuchsia on the website
- Example on picocss site for Design Systems is not working
- Card inside a Dialog does not have the correct width.
- Links don't respect `--pico-text-underline-offset` variable
- Using $parent-selector variable doesn't fully restrict styles to specified selector. HOT 1
- aria-invalid with grouped input
- Invalid HTML5 HOT 1
- Helper texts are incompatible with groups
- textarea after button spacing
- Nav example horizontal scroll HOT 2
- Remove margin-bottom on last child HOT 1
- Dialog background color inconsistent HOT 1
- Nav item link role="button" is margined negatively HOT 1
- Color 'azure' missing from CDN HOT 3
- Nav item show garbled text when using local CSS
- Outline shows when input type="search" is grouped with button HOT 1
- Setting to control the creation of dark/light mode CSS
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pico.