I am providing code for some coding problems in multiple languages. How can we add tabbed content?
I want to achieve something like below screenshot.
I tried one solution. Let me explain.
<details class="accordion">
<summary style="color: #fff;padding: 10px;cursor: pointer;background: #600ee4;border-radius: 5px 5px 0px 0px;">Java Code</summary>
<pre class="language-java" style="border-radius: 0px 0px .375rem .375rem;" tabindex="0">
<code class="language-java">
import java.util.*;
import java.io.*;
import java.util.*;
class Innoskrit {
public static int[][] merge(int[][] intervals) {
if (intervals.length < 2)
return intervals;
// sort the intervals by start time
Arrays.sort(intervals, (a, b) -> Integer.compare(a[0], b[0]));
List<int[]> mergedIntervals = new ArrayList<>();
int[] prevInterval = intervals[0];
int i = 1;
while (i < intervals.length) {
int[] interval = intervals[i];
if (interval[0] <= prevInterval[1]) { // overlapping intervals, adjust the 'end'
prevInterval[1] = Math.max(interval[1], prevInterval[1]);
} else { // non-overlapping interval, add the previous interval and reset
mergedIntervals.add(prevInterval);
prevInterval = interval;
}
i += 1;
}
// add the last interval
mergedIntervals.add(prevInterval);
return mergedIntervals.toArray(new int[mergedIntervals.size()][]);
}
public static void main(String[] args) {
int[][] intervals = new int[][] {{1, 4}, {2, 5}, {7, 9}};
for (int[] interval : Innoskrit.merge(intervals))
System.out.print("[" + interval[0] + "," + interval[1] + "] ");
System.out.println();
intervals = new int[][] {{6, 7}, {2, 4}, {5, 9}};
for (int[] interval : Innoskrit.merge(intervals))
System.out.print("[" + interval[0] + "," + interval[1] + "] ");
System.out.println();
intervals = new int[][] {{1, 4}, {2, 6}, {3, 5}};
for (int[] interval : Innoskrit.merge(intervals))
System.out.print("[" + interval[0] + "," + interval[1] + "] ");
System.out.println();
}
}
</code>
</pre>
</details>
When I added this code in HTML Block. It looked nice but the code is broken. Please see below screenshot after the last line, the entire code is broken.
It’s hard to say without a live site to debug.
But I’d guess that overflow is hidden on one of the elements, which means that the text is cut off without a scrollbar.
As for the tabs — they’re not simple to implement and have lots of gotchas. They’ll require some custom JS and CSS. You can see this tutorial for a basic implementation: How To Create Tabs