这是相当丑陋的（需要更多的css和更好的javascript），但这是一个开始，让您知道如何继续:

代码en

null

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>