How to show multi-language, multi-file code blocks in webpage similar to this example in stripe docs?

Question

At this webpage, https://stripe.com/docs/payments/accept-a-payment#web-setup

There are examples of code snippets spread across different languages (using tabs) and different files (within same tab)

I wonder how to achieve the the same effect and also allow copy to clipboard

See image below for what I mean

this is no easy thing to do. You will need one – gui3 Aug 02 '20 at 13:02 — gui3, Aug 02 '20 at 13:02

score 0 · Answer 1 · answered Aug 02 '20 at 13:41

This is quite ugly (needs more css and better javascript) but it's a start, to give you an idea of how to proceed :

codepen

let data = {
  javascript: [
    {
      filename: "javascript1.js",
      content: "//this is the content of file 1"
    },{
      filename: "file2.js",
      content: "//this is the content of file 2"
    }
  ],
  python: [
    {
      filename: "python1.py",
      content: "#this is the content of file 1"
    },{
      filename: "python2.py",
      content: "#this is the content of file 2"
    },{
      filename: "python3.py",
      content: "#this is the content of file 3"
    }
  ],
  'C++': [
    {
      filename: "c++1.cpp",
      content: "//this is the content of file 1"
    },{
      filename: "header1.h",
      content: "//this is the content of header 1"
    }
  ]
}

function clearElement(element) {
  while (element.firstChild) {
    element.removeChild(element.firstChild)
  }
}

function setupCodeBlocks(targetElementId) {
  let container = document
    .getElementById(targetElementId)
    
  clearElement(container)
    
  let languageNav = document.createElement('nav')
  
  let filesDiv = document.createElement('div')
    
  let languages = Object.keys(data)
  languages.forEach(language => {
    let languageButton = document.createElement('button')
    languageButton.id = "show:" + language
    languageButton.appendChild(
      document.createTextNode(language)
    )
    languageButton.classList.add('language')
    languageButton.addEventListener('click', (e) => {
      show(language)
    })
    
    languageNav.appendChild(languageButton)
  })
  
  function show (language) {
    clearElement(filesDiv)
    let files = data[language]
    files.forEach(file => {
      let fileSection = document.createElement('div')
      let fileTitle = document.createElement('h3')
      fileTitle.appendChild(
        document.createTextNode(file['filename'])
      )
      let fileContent = document.createElement('textarea')
      fileContent.value = file['content']
      
      fileSection.appendChild(fileTitle)
      fileSection.appendChild(fileContent)
      filesDiv.appendChild(fileSection)
    })
  }
  
  container.appendChild(languageNav)
  container.appendChild(filesDiv)
}

setupCodeBlocks('codeblocks')

#codeblocks {
  border: 1px solid #666;
  
}

<h1>
 multi language/files code blocks :
</h1> 

<div id="codeblocks">
  ...loading
</div>

score 0 · Answer 2 · answered Aug 02 '20 at 15:55

You can also achieve the same effect using data-id on the button and showing the div that associates with that.

See this answer for more ways to highlight for the copying part

let currentID = 1;
document.getElementById("options").addEventListener("click", e => {
    if(e.target.dataset.id) {
        document.querySelectorAll(".tabs-content div").forEach(tab => {
            tab.style.display = "none";
        })
        document.querySelector(`.tabs-content [data-id="${e.target.dataset.id}"]`).style.display = "block";
        currentID = e.target.dataset.id;
    } else {
        const currentNode = document.querySelector(`.tabs-content [data-id="${currentID}"]`);
        const selection = window.getSelection();
        const range = document.createRange();
        range.selectNodeContents(currentNode);
        selection.removeAllRanges();
        selection.addRange(range);
        document.execCommand("copy");
        selection.removeAllRanges();
    }
});

#options {
    display: flex;
    background-color: black;
    color: white;
    padding: 15px;
    justify-content: space-around;
}

#options span {
    fill: white;
    width: 10px;
}
        
.tabs-content {
    box-sizing: border-box;
    width: 100%;
    background-color: darkblue;
    color: white;
    padding-left: 30px;
}

<div>
   <nav id="options">
      <a data-id="1">First</a>
      <a data-id="2">Second</a>
      <a data-id="3">Third</a>
      <a data-id="4">Fourth</a>
      <span>
          <svg height="15" viewBox="0 0 16 16" width="15" xmlns="http://www.w3.org/2000/svg" class="copy-btn">
              <path d="m7 5h2c1.6568542 0 3-1.34314575 3-3 1.1045695 0 2 .8954305 2 2v10c0 1.1045695-.8954305 2-2 2h-8c-1.1045695 0-2-.8954305-2-2v-10c0-1.1045695.8954305-2 2-2 0 1.65685425 1.34314575 3 3 3zm-1-3c0-1.1045695.8954305-2 2-2s2 .8954305 2 2c0 .55228475-.44771525 1-1 1h-2c-.55228475 0-1-.44771525-1-1z" fill-rule="evenodd"></path>
          </svg>
      </span>
  </nav>
</div>
<div class="tabs-content" style="float: left;">
    <div class="code" data-id="1">
        <p>This is the first div</p>
    </div>
    <div class="code" data-id="2" style="display: none;">
        <p>This is the second div</p>
    </div>
    <div class="code" data-id="3" style="display: none;">
        <p>This is the third div</p>
    </div>
    <div class="code" data-id="4" style="display: none;">
        <p>This is the fourth div</p>
    </div>
</div>

How to show multi-language, multi-file code blocks in webpage similar to this example in stripe docs?

2 Answers2