每当我尝试使用 CDN(内容交付网络)时,它都不起作用。大多数时候,在控制台中,它的行为就像我粘贴了一个普通链接,或者即使我使用 4G 互联网连接,我什至没有粘贴任何链接。
这是下面的代码,我将 CDN 链接粘贴到我的 html 标头中,我也尝试将其粘贴到我的 JS 脚本中,但没有解决方案。请帮助,我将感谢您的反馈。
注意:CDN 库在我使用时通常不起作用,但这是一个 Markdown CDN 库。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Markdown CDN</title>
<!--BEGINNING OF THE CDN LINK IN MY HTML-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/7.0.2/marked.min.js" integrity="sha512- Y+SkIEaxkj9RglaZ4p/VvDnuaj5+qK4noarB/ZqRChnFl712vOlJTmD3wK6HEXq00R0bFsFvJ5vEEkYezwugZw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--END OF THE CDN LINK IN MY HTML-->
<link rel="stylesheet" href="markdown.css">
<script src="https://kit.fontawesome.com/4a70be6355.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="all">
<div class="tools">
<button class="edit"><i class="fa-regular fa-pen-to-square"></i></button>
<button class="delete"><i class="fas fa-trash"></i></button>
</div>
<main class="main hidden"></main>
<textarea name="" id="" cols="30" rows="10"></textarea>
</div>
<script>
const all = document.querySelector('.all');
const textarea = all.querySelector('textarea');
const main = all.querySelector('.main');
const editBtn = document.querySelector('.edit');
const deleteBtn = document.querySelector('.delete');
editBtn.addEventListener('click', ()=> {
main.classList.toggle('hidden');
textarea.classList.toggle('hidden');
})
textarea.addEventListener('input', (e)=> {
const {value} = e.target;
main.innerHTML = marked(value);
})
</script>
</body>
</html>
我尝试将下面的链接粘贴到我的JS中仍然没有解决方案;
/*BEGINNING OF THE CDN LINK IN MY JS*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/7.0.2/marked.min.js" integrity="sha512-Y+SkIEaxkj9RglaZ4p/VvDnuaj5+qK4noarB/ZqRChnFl712vOlJTmD3wK6HEXq00R0bFsFvJ5vEEkYezwugZw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
/*END OF THE CDN LINK IN MY JS*/
<script>
const all = document.querySelector('.all');
const textarea = all.querySelector('textarea');
const main = all.querySelector('.main');
const editBtn = document.querySelector('.edit');
const deleteBtn = document.querySelector('.delete');
editBtn.addEventListener('click', ()=> {
main.classList.toggle('hidden');
textarea.classList.toggle('hidden');
})
textarea.addEventListener('input', (e)=> {
const {value} = e.target;
main.innerHTML = marked(value);
})
您想要
marked.parse()
,而不是 marked()
。
let input = document.getElementById('markdown').innerHTML;
let output = marked.parse(input)
document.getElementById('transformed').innerHTML = output;
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/7.0.2/marked.min.js" integrity="sha512-Y+SkIEaxkj9RglaZ4p/VvDnuaj5+qK4noarB/ZqRChnFl712vOlJTmD3wK6HEXq00R0bFsFvJ5vEEkYezwugZw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="markdown">
# This is markdown
1. It
2. has
3. lists
4. and *formatting* of **text** in __different__ _styles_
</div>
<div id="transformed"></div>
下次,当某些事情没有按照您期望的方式工作时,通常值得仔细阅读错误消息(并将其包含在您的问题中,而不是仅仅说“它不起作用”!)尝试使用也会有帮助。 (在这种情况下,我的第一个调试步骤是
console.log(marked)
,它表明它不是一个函数)。
如果您经常在使用外部代码库时遇到问题,请检查他们的文档以确保您遵循他们的 API。