在 markdown 中嵌入 <style> 和 <script>

介绍

博客系统会滤掉 markdown 中的 <style> 和 <script> 标签

我决定将 HTML 代码写在 markdown 的围栏代码块中，渲染时从中提取出代码并注入页面

代码实现

使用博客系统的代码注入功能，往博客页注入下述代码

<script>
document.querySelectorAll("pre > code").forEach(code => {
  const matched = code.classList.value.match(/language-(\w*)/);
  const language = (matched !== null && matched.length == 2) ? matched[1] : "";

  if (language === "injected_html") {
    const injected = document.createElement("div");
    injected.innerHTML = code.textContent;
    const pre = code.parentNode;
    pre.parentNode.replaceChild(injected, pre);
    
    injected.querySelectorAll('script').forEach(script => {
      const new_script = document.createElement('script');
      new_script.textContent = script.textContent;
      for (let attr of script.attributes) {
        new_script.setAttribute(attr.name, attr.value);
      }
      script.parentNode.replaceChild(new_script, script);
    });
  }
})
</script>

用法示例

**计数器**

点击按钮计数：

```injected_html
<style>
  button#my_button {
    border: 1px solid black;
    outlint: none;
    width: 6em;
    transition: all 0.1s;
  }
  button#my_button:hover { scale: 110%; }
</style>

<button id="my_button">click me</button>

<script>
  const btn = document.querySelector('button#my_button');
  let count = 0;
  btn.addEventListener('click', () => {
    count += 1;
    btn.textContent = `${count}`;
  });
</script>
```

效果展示

计数器

点击按钮计数：

<!-- 如果你没看到效果，是因为我没有将代码注入到博客页中
     你可以在浏览器控制台中执行上述代码，便可看到效果 -->

<style>
  button#my_button {
    border: 1px solid black;
    outlint: none;
    width: 6em;
    transition: all 0.1s;
  }
  button#my_button:hover { scale: 110%; }
</style>

<button id="my_button">click me</button>

<script>
  const btn = document.querySelector('button#my_button');
  let count = 0;
  btn.addEventListener('click', () => {
    count += 1;
    btn.textContent = `${count}`;
  });
</script>