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
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:
<details>
<summary>Python3.10</summary>
Below, you can change the first ``` to ```bash for syntax highlighting :)
Checkout this regular code block:
```
brew install [email protected]
```
</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
😩
@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
Somebold textcode.golinkBut not with markdown but with HTML tags
can use markdown
ifyou don't mind anewlinein your summary linkinterface{}i.e.
You can go even crazier and have a multiline image, stack trace, etc. in the summary
Like this