pref: copy to clipboard
This commit is contained in:
KUN1007
parent
fc377e3de7
commit
95d9354001
|
|
@ -1,71 +0,0 @@
|
|||
/**
|
||||
* 这是渲染 wangEditor 输出的富文本的样式
|
||||
* 需要注意的是，.kungalgame-topic-content 这个类名被全局注册了
|
||||
*/
|
||||
.kungalgame-topic-content {
|
||||
border-radius: 5px;
|
||||
padding: 0 10px;
|
||||
margin-top: 20px;
|
||||
overflow-x: auto;
|
||||
* {
|
||||
max-width: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--kungalgame-blue-5);
|
||||
border-bottom: 1.5px solid var(--kungalgame-trans-white-9);
|
||||
&:hover {
|
||||
border-bottom: 1.5px solid var(--kungalgame-blue-5);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.kungalgame-topic-content p,
|
||||
.kungalgame-topic-content li {
|
||||
white-space: pre-wrap; /* 保留空格 */
|
||||
}
|
||||
|
||||
.kungalgame-topic-content blockquote {
|
||||
border-left: 8px solid var(--kungalgame-blue-1);
|
||||
padding: 10px 10px;
|
||||
margin: 10px 0;
|
||||
background-color: var(--kungalgame-trans-blue-0);
|
||||
}
|
||||
|
||||
.kungalgame-topic-content code {
|
||||
font-family: monospace;
|
||||
background-color: var(--kungalgame-trans-blue-0);
|
||||
padding: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.kungalgame-topic-content pre > code {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.kungalgame-topic-content table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.kungalgame-topic-content td,
|
||||
.kungalgame-topic-content th {
|
||||
border: 1px solid var(--kungalgame-blue-4);
|
||||
min-width: 50px;
|
||||
height: 20px;
|
||||
}
|
||||
.kungalgame-topic-content th {
|
||||
background-color: var(--kungalgame-trans-blue-0);
|
||||
}
|
||||
|
||||
.kungalgame-topic-content ul,
|
||||
.kungalgame-topic-content ol {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.kungalgame-topic-content input[type='checkbox'] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
|
@ -24,8 +24,6 @@ onMounted(() => {
|
|||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/styles/html/richText.scss';
|
||||
|
||||
/* 内容区右侧的话题展示区 */
|
||||
.kungalgame-topic-content {
|
||||
/** 100 + 20 + 20 + 1 = 141px */
|
||||
|
|
@ -41,6 +39,8 @@ onMounted(() => {
|
|||
padding: 0 10px;
|
||||
margin-top: 20px;
|
||||
overflow-x: auto;
|
||||
|
||||
/* 下面的代码调整富文本区域的格式 */
|
||||
:deep(*) {
|
||||
max-width: 100%;
|
||||
overflow-y: scroll;
|
||||
|
|
@ -123,35 +123,48 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
:deep(.toolbar) {
|
||||
top: 10px;
|
||||
top: 17px;
|
||||
right: 10px;
|
||||
display: flex;
|
||||
& > .toolbar-item {
|
||||
/* 这里直接根据 DOM 结构写的，写的不是很明了，要怪就怪写 prism 插件的人吧 hhh */
|
||||
button,
|
||||
& > span {
|
||||
background-color: var(--kungalgame-trans-white-9);
|
||||
border: 1px solid var(--kungalgame-blue-4);
|
||||
color: var(--kungalgame-blue-4);
|
||||
transition: all 0.2s;
|
||||
box-shadow: unset;
|
||||
margin-left: 10px;
|
||||
border-radius: 0;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
& > span {
|
||||
color: var(--kungalgame-pink-4);
|
||||
border: 1px solid var(--kungalgame-pink-4);
|
||||
background-color: var(--kungalgame-trans-white-5);
|
||||
&:hover {
|
||||
background-color: var(--kungalgame-blue-4);
|
||||
background-color: var(--kungalgame-pink-4);
|
||||
color: var(--kungalgame-white);
|
||||
}
|
||||
}
|
||||
button {
|
||||
cursor: pointer;
|
||||
background-color: var(--kungalgame-trans-white-9);
|
||||
border: 1px solid var(--kungalgame-blue-4);
|
||||
color: var(--kungalgame-blue-4);
|
||||
&:hover {
|
||||
background-color: var(--kungalgame-blue-4);
|
||||
color: var(--kungalgame-white);
|
||||
}
|
||||
&:focus {
|
||||
color: var(--kungalgame-red-4);
|
||||
color: var(--kungalgame-pink-4);
|
||||
border: 1px solid var(--kungalgame-pink-4);
|
||||
background-color: var(--kungalgame-trans-white-5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 适配手机端 */
|
||||
@media (max-width: 700px) {
|
||||
.kungalgame-topic-content {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -15,28 +15,28 @@ export default defineConfig({
|
|||
visualizer() as PluginOption,
|
||||
vueJsx(),
|
||||
prismjsPlugin({
|
||||
// 这里和 wangEditor 适配
|
||||
languages: [
|
||||
'javascript',
|
||||
'css',
|
||||
'jsx',
|
||||
'typescript',
|
||||
'markup',
|
||||
'go',
|
||||
'java',
|
||||
'python',
|
||||
'nginx',
|
||||
'yaml',
|
||||
'bash',
|
||||
'sql',
|
||||
'git',
|
||||
'markdown',
|
||||
'php',
|
||||
'vim',
|
||||
],
|
||||
plugins: [
|
||||
'line-numbers',
|
||||
'show-language',
|
||||
'toolbar',
|
||||
'copy-to-clipboard',
|
||||
'c',
|
||||
'python',
|
||||
'java',
|
||||
'cpp',
|
||||
'csharp',
|
||||
'visual-basic',
|
||||
'sql',
|
||||
'ruby',
|
||||
'swift',
|
||||
'bash',
|
||||
'markdown',
|
||||
'lua',
|
||||
'groovy',
|
||||
],
|
||||
plugins: ['show-language', 'toolbar', 'copy-to-clipboard'],
|
||||
theme: 'okaidia',
|
||||
css: true,
|
||||
}),
|
||||
|
|
|
|||
Loading…
Reference in a new issue