org导出html时，如何才能在src块中有copy的功能？

Org-mode
1

前端菜鸟 :rofl:~~ org-mode导出html如何才能实现如下右边点击复制的功能？

image
image838×209 5.25 KB

2

[配置分享] eaf 预览 org 文档时渲染 plantuml、mermaid、graphviz 代码 - Emacs-general - Emacs China (emacs-china.org)

在 custom-head.html 增加 copy-button 的功能后的代码，可以自己调样式

<script defer src="https://cdnjs.cloudflare.com/ajax/libs/viz.js/2.1.2/viz.js" type="text/javascript"> </script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/viz.js/2.1.2/full.render.js" type="text/javascript"> </script>
<script defer src="https://cdn.jsdelivr.net/gh/jmnote/[email protected]/dist/plantuml-encoder.min.js" integrity="sha256-Qsk2KRBCN5qVZX7B+8+2IvQl1Aqc723qV1tBCQaVoqo=" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js"></script>


<script type="text/javascript">

 function loadViz() {
   let viz = new Viz();
   Array.prototype.forEach.call(document.querySelectorAll(".src-dot"), function(code) {
     viz.renderSVGElement(code.innerText)
        .then(function(element) {
          element.style.display = "block";
          element.style.margin = "0 auto";

          container = code.parentNode;

          container.parentNode.insertBefore(element, container);
          container.style.display = "none";
        })
        .catch(function(error) {
          console.log(error);
        });
   });
 }

 function loadPlantuml() {
   Array.prototype.forEach.call(document.querySelectorAll(".src-plantuml"), function(code) {
     let image = document.createElement("IMG");
     image.loading = 'lazy'; // Lazy loading
     image.style.display= "block";
     image.style.margin = "0 auto";
     image.src = 'http://www.plantuml.com/plantuml/svg/~1' + plantumlEncoder.encode(code.innerText);

     container = code.parentNode;
     container.parentNode.insertBefore(image, container);
     container.style.display = "none";

   });
 }

 function loadMermaid() {
   Array.prototype.forEach.call(document.querySelectorAll(".src-mermaid"), function(code){
     let div = document.createElement("div");
     div.textContent = code.textContent;
     div.className = "mermaid";
     div.style.textAlign = "center";

     container = code.parentNode;
     container.parentNode.insertBefore(div, container);
     container.style.display = "none";
   });

   let mermaidConfig = {
     startOnLoad: true,
     flowchart: {
       useMaxWidth: false,
       htmlLabels: true
     },
   };
   mermaid.initialize(mermaidConfig);
 }

 function addCopyButton() {
   document.querySelectorAll('pre.src').forEach((codeblock) => {
     const container = codeblock.parentNode;

     const copybutton = document.createElement('button');
     copybutton.classList.add('copy-code');
     copybutton.innerText = 'copy';

     function copyingDone() {
       copybutton.innerText = 'copied!';
       setTimeout(() => {
         copybutton.innerText = 'copy';
       }, 2000);
     }

     copybutton.addEventListener('click', (cb) => {
       if ('clipboard' in navigator) {
         navigator.clipboard.writeText(codeblock.textContent);
         copyingDone();
         return;
       }

       const range = document.createRange();
       range.selectNodeContents(codeblock);
       const selection = window.getSelection();
       selection.removeAllRanges();
       selection.addRange(range);
       try {
         document.execCommand('copy');
         copyingDone();
       } catch (e) { };
       selection.removeRange(range);
     });

     container.appendChild(copybutton);
   });
 }

 document.onreadystatechange = () => {
   if (document.readyState === "complete") {
     loadViz();
     loadPlantuml();
     loadMermaid();
     addCopyButton()
   }
 }
</script>

<style type="text/css">
 .org-src-container {
   position: relative
 }

 .org-src-container:hover .copy-code {
   display: inline
 }

 .copy-code {
   display: none;
   position: absolute;
   top: 6px;
   right: 24px;
   font-size: 12px;
   font-weight: 500;
   line-height: 10px;
   letter-spacing: .5px;
   width: 65px;
   color: #fff;
   background-color: #a19f9f;
   border: 1.25px solid #232326;
   border-top-left-radius: 0;
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 0;
   white-space: nowrap;
   padding: 4px 4px 5px;
   margin: 0 0 0 1px;
   cursor: pointer;
   opacity: .6;
 }
</style>
3

第一个函数加到initl.el，然后自己做了个custom_head.html， 运行后，重新生成html，没有显示copy的按键~~ :rofl:

4

函数加到 init.el 后，还要在 init.el 里调用一次

看一下生成的 html 里面有没有相关的代码，要把鼠标放到代码上才显示

5

可以了~，谢谢~