在线MD代码 - HTML

 <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>咸瑜专用markdown编辑器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f7ff; /* 浅蓝色背景 */
            margin: 0;
            padding: 0;
        }
        .header {
            background-color: #1e90ff; /* 深蓝色头部 */
            color: #fff;
            padding: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .container {
            display: flex;
            width: 80%;
            margin: 20px auto;
            border: 1px solid #ddd;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        .menu {
            background-color: #4682b4; /* 靛蓝色菜单 */
            padding: 10px;
            min-width: 80px;
        }
        .editor, .preview {
            width: 50%;
            padding: 20px;
            box-sizing: border-box;
            overflow-y: auto;
        }
        .editor {
            border-right: 1px solid #ddd;
        }
        .preview {
            background-color: #fff;
            border-left: 1px solid #ddd;
        }
        textarea {
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
            resize: none;
            font-family: monospace;
            font-size: 14px;
            padding: 10px;
            box-sizing: border-box;
        }
        .preview-content {
            padding: 20px;
            overflow-y: auto;
        }
        button {
            margin: 5px;
            padding: 8px 12px;
            cursor: pointer;
            border: none;
            background-color: #1e90ff; /* 深蓝色按钮 */
            color: #fff;
            border-radius: 3px;
            font-size: 14px;
        }
        button:hover {
            background-color: #4169e1; /* 更深的蓝色悬停状态 */
        }
    </style>
</head>
<body>
    <div class="header">
        <div></div>
        <div>
            <button onclick="confirmNew()">新建</button>
            <button onclick="saveAs()">保存</button>
            <button onclick="saveAsImage()">保存为图片</button>
            <input type="file" id="file-input" style="display:none;" onchange="loadFile(event)">
            <label for="file-input"><button>加载</button></label>
        </div>
    </div>
 
    <div class="container">
        <div class="menu">
            <!-- 可以在此处添加其他菜单项 -->
        </div>
        <div class="editor">
            <textarea id="markdown-input" placeholder="在这里编写Markdown..."></textarea>
        </div>
        <div class="preview">
            <div id="markdown-preview" class="preview-content"></div>
        </div>
    </div>
 
    <script src="https://cdn.bootcdn.net/ajax/libs/marked/2.0.3/marked.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script>
        const markdownInput = document.getElementById('markdown-input');
        const markdownPreview = document.getElementById('markdown-preview');
 
        markdownInput.addEventListener('input', updatePreview);
 
        function updatePreview() {
            const markdownText = markdownInput.value;
            const html = marked(markdownText);
            markdownPreview.innerHTML = html;
        }
 
        function confirmNew() {
            if (markdownInput.value.trim() !== '') {
                if (confirm('是否保存当前内容？')) {
                    saveAs();
                }
            }
            markdownInput.value = '';
            updatePreview();
        }
 
        function saveAs() {
            const fileName = prompt("请输入文件名：", "markdown.txt");
            if (fileName) {
                const markdownText = markdownInput.value;
                const blob = new Blob([markdownText], { type: 'text/plain' });
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = fileName;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
            }
        }
 
        function saveAsImage() {
            html2canvas(markdownPreview).then(canvas => {
                const link = document.createElement('a');
                link.download = 'markdown.png';
                link.href = canvas.toDataURL('image/png');
                link.click();
            });
        }
 
        function loadFile(event) {
            const file = event.target.files[0];
            if (!file) return;
            const reader = new FileReader();
            reader.onload = function(e) {
                const content = e.target.result;
                markdownInput.value = content;
                updatePreview();
            };
            reader.readAsText(file);
        }
    </script>
    <footer style="text-align: center; padding: 10px; background-color: #f0f7ff;">
        &copy; 2024 咸瑜
    </footer>
</body>
</html>

posted @ 2024-06-26 11:36 咸瑜阅读(87) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· vue3 前端密码md5加密发送

· python 5 列表

· 在线编写Markdown

· 小程序

· 在线编写Markdown

阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· 什么是nginx的强缓存和协商缓存
· 一文读懂知识蒸馏
· Manus爆火，是硬核还是营销？

历史上的今天：
2022-06-26 vue 集成 wangEditor富文本编辑器注意点
2021-06-26 1. SpringMVC 简介
2021-06-26 2补：v-for - 列表渲染的用法和他的参数
2021-06-26 7. v-bind 绑定Class操作【数组语法】

咸瑜

无限风光在险峰

在线MD代码 - HTML

公告

常用链接

我的标签

积分与排名

随笔分类 (776)

随笔档案 (737)

阅读排行榜

评论排行榜

最新评论

	<!DOCTYPE html>
	<html lang="zh">
	<head>
	<meta charset="UTF-8">
	<title>咸瑜专用markdown编辑器</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	background-color: #f0f7ff; /* 浅蓝色背景 */
	margin: 0;
	padding: 0;
	}
	.header {
	background-color: #1e90ff; /* 深蓝色头部 */
	color: #fff;
	padding: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	}
	.container {
	display: flex;
	width: 80%;
	margin: 20px auto;
	border: 1px solid #ddd;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	overflow: hidden;
	}
	.menu {
	background-color: #4682b4; /* 靛蓝色菜单 */
	padding: 10px;
	min-width: 80px;
	}
	.editor, .preview {
	width: 50%;
	padding: 20px;
	box-sizing: border-box;
	overflow-y: auto;
	}
	.editor {
	border-right: 1px solid #ddd;
	}
	.preview {
	background-color: #fff;
	border-left: 1px solid #ddd;
	}
	textarea {
	width: 100%;
	height: 100%;
	border: none;
	outline: none;
	resize: none;
	font-family: monospace;
	font-size: 14px;
	padding: 10px;
	box-sizing: border-box;
	}
	.preview-content {
	padding: 20px;
	overflow-y: auto;
	}
	button {
	margin: 5px;
	padding: 8px 12px;
	cursor: pointer;
	border: none;
	background-color: #1e90ff; /* 深蓝色按钮 */
	color: #fff;
	border-radius: 3px;
	font-size: 14px;
	}
	button:hover {
	background-color: #4169e1; /* 更深的蓝色悬停状态 */
	}
	</style>
	</head>
	<body>
	<div class="header">
	<div></div>
	<div>
	<button onclick="confirmNew()">新建</button>
	<button onclick="saveAs()">保存</button>
	<button onclick="saveAsImage()">保存为图片</button>
	<input type="file" id="file-input" style="display:none;" onchange="loadFile(event)">
	<label for="file-input"><button>加载</button></label>
	</div>
	</div>

	<div class="container">
	<div class="menu">
	<!-- 可以在此处添加其他菜单项 -->
	</div>
	<div class="editor">
	<textarea id="markdown-input" placeholder="在这里编写Markdown..."></textarea>
	</div>
	<div class="preview">
	<div id="markdown-preview" class="preview-content"></div>
	</div>
	</div>

	<script src="https://cdn.bootcdn.net/ajax/libs/marked/2.0.3/marked.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
	<script>
	const markdownInput = document.getElementById('markdown-input');
	const markdownPreview = document.getElementById('markdown-preview');

	markdownInput.addEventListener('input', updatePreview);

	function updatePreview() {
	const markdownText = markdownInput.value;
	const html = marked(markdownText);
	markdownPreview.innerHTML = html;
	}

	function confirmNew() {
	if (markdownInput.value.trim() !== '') {
	if (confirm('是否保存当前内容？')) {
	saveAs();
	}
	}
	markdownInput.value = '';
	updatePreview();
	}

	function saveAs() {
	const fileName = prompt("请输入文件名：", "markdown.txt");
	if (fileName) {
	const markdownText = markdownInput.value;
	const blob = new Blob([markdownText], { type: 'text/plain' });
	const url = URL.createObjectURL(blob);
	const a = document.createElement('a');
	a.href = url;
	a.download = fileName;
	document.body.appendChild(a);
	a.click();
	document.body.removeChild(a);
	URL.revokeObjectURL(url);
	}
	}

	function saveAsImage() {
	html2canvas(markdownPreview).then(canvas => {
	const link = document.createElement('a');
	link.download = 'markdown.png';
	link.href = canvas.toDataURL('image/png');
	link.click();
	});
	}

	function loadFile(event) {
	const file = event.target.files[0];
	if (!file) return;
	const reader = new FileReader();
	reader.onload = function(e) {
	const content = e.target.result;
	markdownInput.value = content;
	updatePreview();
	};
	reader.readAsText(file);
	}
	</script>
	<footer style="text-align: center; padding: 10px; background-color: #f0f7ff;">
	© 2024 咸瑜
	</footer>
	</body>
	</html>