我需要一些 javascript 代码来从我的 http 目录中读取“markdown 文件”并将其放入 javascript 字符串中。我该如何修改这段代码来做到这一点？
<!-- FILE: index.html-->
<!DOCTYPE html>
<html>
<head>
<title>Markdown TexDollar Reader</title>
<!-- Javascript setup using node.js: ->
<!-- C:\demo> npm install mathjax -->
<!-- C:\demo> npm install showdown -->
<script type="text/javascript" src="./node_modules/showdown/dist/showdown.js"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
});
</script>
<script type="text/javascript"
src="./node_modules/mathjax/MathJax.js?config=TeX-AMS_HTML-full"></script>
</head>
<body>
<script>
converter = new showdown.Converter();
<!-- FIXME: Instead of setting text string manually from javascript,
i want to load my file
in http directory called "markdown.md" into the javascript string text-->
text = '# hello, markdown!';
text += '\nthis is a test';
text += '\n$$e=mc^2$$';
html = converter.makeHtml(text);
document.write(html);
</script>
</body>
</html>
最佳答案
在没有 http 服务器的情况下在本地加载文本文件的唯一方法是使用 HTML5 api 通过文件对话框加载文件，用户可以在其中选择要读取的 Markdown 文件:
<!DOCTYPE html>
<html>
<head>
<title>Render "Markdown file with Tex-Dollar" in browser</title>
<!-- node.js packages required: -->
<!-- npm install jquery -->
<!-- npm install showdown -->
<!-- npm install mathjax -->
<script type="text/javascript" src="./node_modules/showdown/dist/jquery.js"></script>
<script type="text/javascript" src="./node_modules/showdown/dist/showdown.js"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
});
</script>
<script type="text/javascript"
src="./node_modules/mathjax/MathJax.js?config=TeX-AMS_HTML-full"></script>
<script type="text/javascript">
var reader;
function checkFileAPI() {
if (window.File && window.FileReader && window.FileList && window.Blob) {
reader = new FileReader();
return true;
} else {
alert('The File APIs are not fully supported by your browser. Fallback required.');
return false;
}
}
function readText(filePath) {
var output = ""; //placeholder for text output
if(filePath.files && filePath.files[0]) {
reader.onload = function (e) {
output = e.target.result;
displayContents(output);
};//end onload()
reader.readAsText(filePath.files[0]);
}//end if html5 filelist support
else if(ActiveXObject && filePath) { //fallback to IE 6-8 support via ActiveX
try {
reader = new ActiveXObject("Scripting.FileSystemObject");
var file = reader.OpenTextFile(filePath, 1); //ActiveX File Object
output = file.ReadAll(); //text contents of file
file.Close(); //close file "input stream"
displayContents(output);
} catch (e) {
if (e.number == -2146827859) {
alert('Unable to access local files due to browser security settings. ' +
'To overcome this, go to Tools->Internet Options->Security->Custom Level. ' +
'Find the setting for "Initialize and script ActiveX controls not marked as safe" and change it to "Enable" or "Prompt"');
}
}
}
else { //this is where you could fallback to Java Applet, Flash or similar
return false;
}
return true;
}
function displayContents(txt) {
converter = new showdown.Converter();
html = converter.makeHtml(txt);
var el = document.getElementById('main');
el.innerHTML = html; //display output in DOM
MathJax.Hub.Queue(["Typeset",MathJax.Hub, "main"]);
}
</script>
</head>
<body onload="checkFileAPI();">
<div id="container">
<input type="file" onchange='readText(this)' />
<br/>
<hr/>
<h3>Contents of the Text file:</h3>
<div id="main">
...
</div>
</div>
</body>
</html>
从 markdown 加载时，mathjax 渲染有点不稳定……如果有人知道如何修复它的话。让我知道。谢谢。
关于javascript - 将 markdown 文件从 http 目录加载到 javascript 字符串中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55984436/