Skip to content

Instantly share code, notes, and snippets.

@oharato

oharato/file0.txt

Last active October 26, 2017 08:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save oharato/9c28e70532730867177ff064e287961a to your computer and use it in GitHub Desktop.
Save oharato/9c28e70532730867177ff064e287961a to your computer and use it in GitHub Desktop.
Download ZIP
markdownファイルをajaxで取得してクライアント側で描画する ref: http://qiita.com/oharato/items/c61de76aa6008ee3f1d9
Raw
file0.txt
html/
index.html
index.md
hoge.md
Raw
file1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.9.0/github-markdown.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.3/themes/prism.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.3/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
</head>
<body>
<div class="container">
<div id="markdown_content" class="markdown-body"></div>
</div>
<script>
window.onhashchange = function(){
location.reload();
}
let target = document.getElementById('markdown_content');
marked.setOptions({
langPrefix: 'language-'
});
(async () => {
try {
const filename = location.hash.slice(1) || 'index';
const response = await fetch(filename+'.md', {method: 'GET'});
const responseText = await response.text();
target.innerHTML = marked(responseText);
Prism.highlightAll();
} catch (e) {
target.innerHTML = 'failed to load a markdown file';
}
})();
</script>
</body>
</html>
Raw
file2.txt
# README
index.htmlからajaxでmdファイルを取得してパースして表示。syntax highlightにも対応
- [hoge](/#hoge)
Raw
file3.txt
# HOGE
- fuga
- piyo
```javascript
var hoge = 'piyo';
function fuga(){
// aaa
}
```
Raw
hoge.md

HOGE

  • fuga
  • piyo

```javascript

var hoge = 'piyo'; function fuga(){ // aaa } ```

Raw
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.9.0/github-markdown.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.3/themes/prism.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.3/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
</head>
<body>
<div class="container">
<div id="markdown_content" class="markdown-body"></div>
</div>
<script>
window.onhashchange = function(){
location.reload();
}
let target = document.getElementById('markdown_content');
marked.setOptions({
langPrefix: 'language-'
});
(async () => {
try {
const filename = location.hash.slice(1) || 'index';
const response = await fetch(filename+'.md', {method: 'GET'});
const responseText = await response.text();
target.innerHTML = marked(responseText);
Prism.highlightAll();
} catch (e) {
target.innerHTML = 'failed to load a markdown file';
}
})();
</script>
</body>
</html>
Raw
index.md

README

index.htmlからajaxでmdファイルを取得してパースして表示。syntax highlightにも対応

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment