markdown里面实现python代码高亮显示，全局设置
python markdown markdown代码高亮
Blog
发布日期:   2023-03-20
作者:   四两波千斤
文章字数:   805
阅读时长:   3 分

markdown里面写python代码，并且实现python代码高亮显示，全局设置的方法！

先看案例把：
以下的两个案例的效果；每个代码块的右上角都会显示copy按钮，点击按钮就可以拷贝当前代码块里面的内容；

import pandas as pd

# Load data from CSV file
data = pd.read_csv("data.test2")

# Print first five rows
print(data.head())

import pandas 试试 pd

# Load data from CSV file
data = pd.read_csv("data.csv")z

# Print first five rows
print(data.head())

##具体方法：

使用和标签来定义代码块。然后，在代码块下面添加了一个包含“复制”按钮的div元素，并使用CSS样式将该按钮定位在右上角。最后，我们还添加了一个调用navigator.clipboard.writeText()方法的JavaScript函数，以便用户单击按钮时可以将代码段复制到剪贴板中。
将以下代码咱贴到markdown的头部，就可以实现每个代码块右上角显示copy的按钮效果；
当点击“复制”按钮时，页面跳转到底部的原因是因为点击按钮后浏览器会尝试执行默认的提交行为，即提交一个空表单。为了防止这种情况发生，我们可以在按钮的 click 事件中添加一个 event.preventDefault() 方法，以阻止默认的提交行为。修改后的代码

<script>
function copyToClipboard(text) {
  // Check if the Clipboard API is available
  if (navigator.clipboard) {
    // Attempt to write the text to the clipboard using the Clipboard API
    navigator.clipboard.writeText(text)
      .then(() => {
        console.log('Text copied to clipboard');
      })
      .catch(error => {
        console.error('Error copying text: ', error);
        // If the Clipboard API fails, try using the execCommand('copy') method
        fallbackCopyToClipboard(text);
      });
  } else {
    // 如果剪贴板API不可用，请尝试使用execCommand（“复制”）方法
    fallbackCopyToClipboard(text);
  }
}
function fallbackCopyToClipboard(text) {
  var textArea = document.createElement('textarea');
  textArea.value = text;
  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();
  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Fallback: Copying text command was ' + msg);
  } catch (err) {
    console.error('Fallback: Error copying text: ', err);
    // 如果两种方法都失败，则提示用户手动复制文本。
    window.prompt("Copy the following text manually: ", text);
  }
  document.body.removeChild(textArea);
}
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('pre code').forEach(function(codeBlock) {
    var button = document.createElement('button');
    button.textContent = 'Copy';
    button.addEventListener('click', function(event) {
      event.preventDefault(); // 阻止默认的提交行为
      copyToClipboard(codeBlock.innerText);
    });
    var container = document.createElement('div');
    container.classList.add('copy-code');
    container.appendChild(button);
    codeBlock.parentNode.insertBefore(container, codeBlock);
  });
});
</script>
<style>
.copy-code {
  position: relative;
}
.copy-code button {
  position: absolute;
  top: 0;
  right: 0;
}
</style>
赏
  目录