Suppose you're opening an issue and there's a lot noisey logs that may be useful.
Rather than wrecking readability, wrap it in a <details> tag!
<details>
<summary>Summary Goes Here</summary>
...this is hidden, collapsable content...
</details>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
def func():
return 'hello, world!'bin
nest1
a b cnest2
a b c
file1 file2 file3boot
x y z
dev
p q r
etc
e t c
home
me you everyone
lib
lib er ate
Just played a bit to see formatting issue on summary line. Consider two examples below.
With blank line after <summary> open tag:
...this is hidden, collapsable content...
Without blank line after <summary> open tag:
Summary Goes Here
...this is hidden, collapsable content...
Summary Goes Here
...this is hidden, collapsable content...
{
"app.css": {
"size": 52336,
"path": "public/css/app.54bbcf6f50ed582c98f5cf3841d5c837.css"
}
}There is some horizontal space before this bullet point.
If I remove this bullet point, or the space between these bullet points, the horizontal space above the previous one will disappear.
{
"app.css": {
"current": 52336,
"original": 52336,
"difference": 0,
"percentChange": 0
}
}
Was messing around nested details; thought I would post it.
Here's what I did to make a nested tree of <details> and <blockquote>
bin
nest1
a b cnest2
a
b
cfile1 file2 file3boot
x
y
zdev
p
q
retc
e
t
chome
me
you
everyonelib
lib
er
ate
<details><summary> root </summary><blockquote>
<details><summary> bin </summary><blockquote>
<details><summary> nest1 </summary><blockquote>
~~~
a
b
c
~~~
</blockquote></details>
<details><summary> nest2 </summary><blockquote>
a
b
c
</blockquote></details>
~~~
file1
file2
file3
~~~
</blockquote></details>
<details><summary> boot </summary><blockquote>
x
y
z
</blockquote></details>
<details><summary> dev </summary><blockquote>
p
q
r
</blockquote></details>
<details><summary> etc </summary><blockquote>
e
t
c
</blockquote></details>
<details><summary> home </summary><blockquote>
me
you
everyone
</blockquote></details>
<details><summary> lib </summary><blockquote>
lib
er
ate
</blockquote></details>
</blockquote></details>
Hi. I'm not sure why when I commit changes, I see the as text.
I also can't seem to have two details sections on top of each other without one being embedded. It seems like the tags are not properly closing, despite me putting closing tags in.
In Jekyll / Github Pages, even with a blank line the text inside "details" is NOT formatted correctly. It works here on Github:
First line
Second line
But when I put the same thing into a .md file and run Jekyll serve, I get a sad result:
To add to @cdstanford's comment above ... based on my experiments, mixing markdown formatting into details and summary is a mixed bag. And I am specifically talking about what ends up being presented on github pages with markdown: kramdown
Expand/Collapse WORKS in general as a standalone, separate from any other markdown in the .md file
<details> <summary>Spoiler</summary> my extra lines </details>
Expand/Collapse WORKS when Nesting details inside a markdown bullet:
* <details> <summary>Spoiler</summary> my extra lines </details>
Expand/Collapse Does NOT work if details need to be a sub-bullet:
* <details> <summary>Spoiler</summary>
* my extra lines</details>
Formatting Does NOT work if details need to bold or code formatting:
* <details> <summary>Spoiler</summary> my `extra` **lines** </details>
You can also put a <pre> inside the <details>
def func():
return 'hello, world!'
Super nice feature! ... except that the opened <summary> element is too narrow (has no margin) at the bottom, I feel.
I hope some kind of CSS like this is applied to GitHub for better appearance...
details[open] summary {
margin-bottom: 16px;
}
Super nice feature! ... except that the opened
<summary>element is too narrow (has no margin) at the bottom, I feel.
I hope some kind of CSS like this is applied to GitHub for better appearance...details[open] summary { margin-bottom: 16px; }
I use <br /> at the end of my <summary> content to add an extra line of spacing. HTML works inside this tag. Give it a try.
It will be cool to have an attribute to indicate "default opened" but collapsible
It will be cool to have an attribute to indicate "default opened" but collapsible
This already exists:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
Attribute: "open"
i.e.:
<details open>
<summary>some summary</summary>
some opened collapsible
</details>
some opened collapsible
It would be nice to be able to use details in numbered and bulleted lists
@RomanSoloweow Looks ugly but works
<details>
<summary>some summary</summary>
A list
- Another list item
- <details><summary>some summary</summary>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est tellus, convallis eget vulputate ut, eleifend vel mauris. Maecenas consequat aliquam tortor quis bibendum</details>
- Another list item
</details>
A list
I just wish that GitHub markdown made headings collapsible.
I have a problem on my website with this.
Normal text on my website is smaller than the text within the details. So, the text within "details" looks like 2+ pt bigger than the rest of the text on my site.
Does anyone know why? How can I fix this?
test
+ pp[p
- oo[o
{"a": "b"}
Can you use md markup for linking inside the <summary/> tag? It seems to work inside the <details/> tag.
@rubek-joshi It is possible but there is a catch, it can't be markdown formatting because a new line is required for markdown parsers to parse and render them.
So this is possible
code.go linkfunc main() {}But not with markdown but with HTML tags
<details><summary><s>Some</s> <b>bold</b> <i>text</i> <code>code.go</code> <a href="//example.com">link</a></summary>
```go
func main() {}
```
</details>
can use markdown if you don't mind a newline in your summary link
interface{}i.e.
<details><summary>
can use *markdown* ~if~ you don't mind a `newline` in _your_ summary [link](//example.com) </summary>
```go
interface{}
```
</details>
slim (3.0.7) lib/slim/parser.rb:513:in syntax_error!' slim (3.0.7) lib/slim/parser.rb:259:inunknown_line_indicator'
slim (3.0.7) lib/slim/parser.rb:250:in parse_line_indicators' slim (3.0.7) lib/slim/parser.rb:192:inparse_line'
slim (3.0.7) lib/slim/parser.rb:95:in call' temple (0.7.7) lib/temple/engine.rb:50:inblock in call'
temple (0.7.7) lib/temple/engine.rb:50:in each' temple (0.7.7) lib/temple/engine.rb:50:ininject'
... show moreslim (3.0.7) lib/slim/parser.rb:513:in syntax_error!' slim (3.0.7) lib/slim/parser.rb:259:inunknown_line_indicator'
slim (3.0.7) lib/slim/parser.rb:250:in parse_line_indicators' slim (3.0.7) lib/slim/parser.rb:192:inparse_line'
slim (3.0.7) lib/slim/parser.rb:95:in call' temple (0.7.7) lib/temple/engine.rb:50:inblock in call'
temple (0.7.7) lib/temple/engine.rb:50:in each' temple (0.7.7) lib/temple/engine.rb:50:ininject'
temple (0.7.7) lib/temple/engine.rb:50:in call' temple (0.7.7) lib/temple/mixins/template.rb:10:incompile'
temple (0.7.7) lib/temple/templates/tilt.rb:30:in prepare' tilt (2.0.5) lib/tilt/template.rb:92:ininitialize'
sprockets (3.6.2) lib/sprockets/legacy_tilt_processor.rb:25:in new' sprockets (3.6.2) lib/sprockets/legacy_tilt_processor.rb:25:incall'
sprockets (3.6.2) lib/sprockets/processor_utils.rb:75:in call_processor' sprockets (3.6.2) lib/sprockets/processor_utils.rb:57:inblock in call_processors'
sprockets (3.6.2) lib/sprockets/processor_utils.rb:56:in reverse_each' sprockets (3.6.2) lib/sprockets/processor_utils.rb:56:incall_processors'
sprockets (3.6.2) lib/sprockets/loader.rb:134:in load_from_unloaded' sprockets (3.6.2) lib/sprockets/loader.rb:60:inblock in load'
sprockets (3.6.2) lib/sprockets/loader.rb:317:in fetch_asset_from_dependency_cache' sprockets (3.6.2) lib/sprockets/loader.rb:44:inload'
sprockets (3.6.2) lib/sprockets/cached_environment.rb:20:in block in initialize' sprockets (3.6.2) lib/sprockets/cached_environment.rb:47:inyield'
sprockets (3.6.2) lib/sprockets/cached_environment.rb:47:in load' sprockets (3.6.2) lib/sprockets/bundle.rb:23:inblock in call'
sprockets (3.6.2) lib/sprockets/utils.rb:196:in dfs' sprockets (3.6.2) lib/sprockets/bundle.rb:24:incall'
sprockets (3.6.2) lib/sprockets/processor_utils.rb:75:in call_processor' sprockets (3.6.2) lib/sprockets/processor_utils.rb:57:inblock in call_processors'
sprockets (3.6.2) lib/sprockets/processor_utils.rb:56:in reverse_each' sprockets (3.6.2) lib/sprockets/processor_utils.rb:56:incall_processors'
sprockets (3.6.2) lib/sprockets/loader.rb:134:in load_from_unloaded' sprockets (3.6.2) lib/sprockets/loader.rb:60:inblock in load'
sprockets (3.6.2) lib/sprockets/loader.rb:317:in fetch_asset_from_dependency_cache' sprockets (3.6.2) lib/sprockets/loader.rb:44:inload'
sprockets (3.6.2) lib/sprockets/cached_environment.rb:20:in block in initialize' sprockets (3.6.2) lib/sprockets/cached_environment.rb:47:inyield'
sprockets (3.6.2) lib/sprockets/cached_environment.rb:47:in load' sprockets (3.6.2) lib/sprockets/base.rb:66:infind_asset'Like this
<details>
<summary>
```ruby
slim (3.0.7) lib/slim/parser.rb:513:in syntax_error!' slim (3.0.7) lib/slim/parser.rb:259:inunknown_line_indicator'
slim (3.0.7) lib/slim/parser.rb:250:in parse_line_indicators' slim (3.0.7) lib/slim/parser.rb:192:inparse_line'
slim (3.0.7) lib/slim/parser.rb:95:in call' temple (0.7.7) lib/temple/engine.rb:50:inblock in call'
temple (0.7.7) lib/temple/engine.rb:50:in each' temple (0.7.7) lib/temple/engine.rb:50:ininject'
... show more
```
</summary>
...
</details>
Is it possible to include (Python) code inside summary and serve it on a Jekyll site such that it holds onto the same formatting as a chunk of code that's not inside the summary tag?
So far I either get no formatting at all, or when using pre tag inside summary I get some default formatting but not the one of my style.
@TomasMiskov yes, but I had to do some digging to find what to do. It required a modification to _config.yml:
markdown: CommonMarkGhPages
commonmark:
options: ["UNSAFE", "SMART", "FOOTNOTES"]
extensions: ["strikethrough", "autolink", "table", "tagfilter"]Which is in the docs by github here.
After I pushed up the above, I was able to do this in github.io pages and *.github.com:
Check out this bash syntax highlighted block:
brew install python@3.10 <details>
<summary>Python3.10</summary>
Below, you can change the first ``` to ```bash for syntax highlighting :)
Checkout this regular code block:
```
brew install python@3.10
```
</details>Here's an example of it working in jekyll.
No problem! Also, thanks for the info on the highlight syntax for Jekyll! :)
Were you able to get that to work on github.com as well? I couldn't find a way that didn't show the {% highlight python %} start and end tag in the code block, but I'm relatively new to Jekyll.
Nested details:
Code:
* <details><summary>1 <a href="#cap1"> 1- Introduction</a></summary><ul>
<li><details><summary> 1.1 <a href="cap1_1"> Second Level 1 </a> </summary> <ul>
<li>1.1.1 <a href="cap1_1_1"> Third 1a </a> </li>
<li>1.1.2 <a href="cap1_1_2"> Third 2a</a> </li>
<li>1.1.3 <a href="cap1_1_3"> Third 3a</a> </li>
</ul></details></li> <!-- End 1 -->
<li><details><summary> 1.2 <a href="cap1_2"> Second Level 2 </a> </summary> <ul>
<li>1.2.1 <a href="cap1_2_1"> Third 1b</a> </li>
<li>1.2.2 <a href="cap1_2_1"> Third 2b</a> </li>
<li>1.2.3 <a href="cap1_2_1"> Third 3b</a> </li>
</ul></details></li> <!-- End 2-->
<li>1.5 <a href="cap1_5"> Alone 1</a> </li>
<li>1.6 <a href="cap1_6"> Alone 2</a> </li>
</ul> <!-- End -->
</details>
#include <bits/stdc++.h>
int main() {
cout << "Hello World";
}#include <bits/stdc++.h>
int main() {
cout << "Hello World";
}#include <bits/stdc++.h>
int main() {
cout << "Hello World";
}#include <bits/stdc++.h>
int main() {
cout << "Hello World";
}#include <bits/stdc++.h>
int main() {
cout << "Hello World";
}
Does anyone know how to use an image as a summary of details element?
On click of image, I want to expand.
foo bar
@gre It works in README.md for me.