10 KiB
10 KiB
<html lang="zh-CN">
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: #333;
line-height: 1.6;
padding: 20px;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 100%;
max-width: 600px;
background: white;
border-radius: 15px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
overflow: hidden;
}
header {
background: linear-gradient(90deg, #2575fc 0%, #6a11cb 100%);
color: white;
padding: 25px 30px;
text-align: center;
}
h1 {
font-size: 1.8rem;
margin-bottom: 5px;
font-weight: 600;
}
.subtitle {
font-size: 1rem;
opacity: 0.9;
}
.controls {
padding: 25px 30px;
background: #f9f9f9;
border-bottom: 1px solid #eee;
}
.control-group {
margin-bottom: 20px;
}
.control-group:last-child {
margin-bottom: 0;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #2c3e50;
display: flex;
justify-content: space-between;
align-items: center;
}
.value-display {
background: #2575fc;
color: white;
padding: 3px 12px;
border-radius: 12px;
font-size: 0.9rem;
}
input[type="range"] {
width: 100%;
height: 8px;
-webkit-appearance: none;
background: #e0e0e0;
border-radius: 4px;
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 22px;
height: 22px;
background: #2575fc;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
input[type="color"] {
width: 100%;
height: 45px;
border: 2px solid #e0e0e0;
border-radius: 8px;
cursor: pointer;
background: white;
padding: 3px;
}
.preview {
padding: 30px;
text-align: left;
background: white;
border-bottom: 1px solid #eee;
}
.preview-title {
font-weight: 600;
color: #7f8c8d;
margin-bottom: 20px;
text-align: center;
font-size: 1.1rem;
}
.preview-content {
font-size: 1.2rem;
line-height: 1.8;
}
#inline-hr {
display: inline-block;
vertical-align: middle;
}
.code-output {
margin-top: 30px;
padding: 20px;
background: #2c3e50;
color: white;
border-radius: 8px;
font-family: 'Courier New', monospace;
white-space: pre-wrap;
word-break: break-all;
text-align: left;
font-size: 0.9rem;
line-height: 1.5;
}
.copy-btn {
display: block;
width: 100%;
padding: 14px;
background: linear-gradient(90deg, #2575fc 0%, #6a11cb 100%);
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
margin-top: 15px;
transition: all 0.3s ease;
}
.copy-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(38, 117, 252, 0.4);
}
.copy-btn:active {
transform: translateY(0);
}
footer {
text-align: center;
padding: 20px;
color: #7f8c8d;
font-size: 0.9rem;
background: #f9f9f9;
}
.usage {
padding: 15px 30px;
background: #e8f4fc;
border-top: 1px solid #c3e1f7;
}
.usage h3 {
color: #2575fc;
margin-bottom: 10px;
}
.usage p {
margin-bottom: 10px;
font-size: 0.95rem;
}
</style>
文字内联短横线生成器
适用于Obsidian及其他Markdown编辑器
<div class="controls">
<div class="control-group">
<label>
横线长度
<span id="length-value" class="value-display">150px</span>
</label>
<input type="range" id="hr-length" min="20" max="300" value="150">
</div>
<div class="control-group">
<label>
线条粗细
<span id="thickness-value" class="value-display">3px</span>
</label>
<input type="range" id="hr-thickness" min="1" max="10" value="3">
</div>
<div class="control-group">
<label for="hr-color">线条颜色</label>
<input type="color" id="hr-color" value="#3498db">
</div>
</div>
<div class="preview">
<div class="preview-title">预览效果</div>
<div class="preview-content">
<p>这是一段示例文字<span id="inline-hr"></span>横线跟在文字后面。</p>
<p>另一行示例<span id="inline-hr2"></span>这是另一条横线。</p>
</div>
<div class="code-output" id="code-output">
<!-- 代码将在这里显示 -->
</div>
<button class="copy-btn" id="copy-btn">复制HTML代码</button>
</div>
<div class="usage">
<h3>使用说明</h3>
<p>1. 调整上方控件自定义横线样式</p>
<p>2. 点击复制按钮获取代码</p>
<p>3. 在Obsidian中：</p>
<p> - 使用阅读视图：直接粘贴HTML代码</p>
<p> - 使用编辑视图：粘贴代码后，Obsidian会自动渲染</p>
</div>
<footer>
<p>内联短横线生成器 | 专为Obsidian优化</p>
</footer>
</div>
<script>
// 获取DOM元素
const lengthSlider = document.getElementById('hr-length');
const thicknessSlider = document.getElementById('hr-thickness');
const colorPicker = document.getElementById('hr-color');
const inlineHr = document.getElementById('inline-hr');
const inlineHr2 = document.getElementById('inline-hr2');
const codeOutput = document.getElementById('code-output');
const copyBtn = document.getElementById('copy-btn');
const lengthValue = document.getElementById('length-value');
const thicknessValue = document.getElementById('thickness-value');
// 更新自定义横线
function updateHr() {
const length = lengthSlider.value;
const thickness = thicknessSlider.value;
const color = colorPicker.value;
// 更新显示的值
lengthValue.textContent = `${length}px`;
thicknessValue.textContent = `${thickness}px`;
// 应用样式到横线
inlineHr.style.width = `${length}px`;
inlineHr.style.height = `${thickness}px`;
inlineHr.style.backgroundColor = color;
inlineHr.style.border = 'none';
inlineHr.style.borderRadius = '2px';
inlineHr.style.margin = '0 5px';
inlineHr.style.verticalAlign = 'middle';
// 第二个横线示例
inlineHr2.style.width = `${length}px`;
inlineHr2.style.height = `${thickness}px`;
inlineHr2.style.backgroundColor = color;
inlineHr2.style.border = 'none';
inlineHr2.style.borderRadius = '2px';
inlineHr2.style.margin = '0 5px';
inlineHr2.style.verticalAlign = 'middle';
// 更新代码输出
codeOutput.textContent = `<span style="display: inline-block; width: ${length}px; height: ${thickness}px; background: ${color}; vertical-align: middle; margin: 0 5px;"></span>`;
}
// 复制代码到剪贴板
function copyToClipboard() {
const text = codeOutput.textContent;
navigator.clipboard.writeText(text).then(() => {
// 改变按钮文本提示用户
copyBtn.textContent = '已复制!';
setTimeout(() => {
copyBtn.textContent = '复制HTML代码';
}, 2000);
}).catch(err => {
console.error('复制失败: ', err);
});
}
// 添加事件监听器
lengthSlider.addEventListener('input', updateHr);
thicknessSlider.addEventListener('input', updateHr);
colorPicker.addEventListener('input', updateHr);
copyBtn.addEventListener('click', copyToClipboard);
// 初始化
updateHr();
</script>