vue-prism-editor
vue-prism-editor copied to clipboard
koca
Line number misalign with code
I have around 150 lines of code, and the line numbers misalign with the code lines. Do you know how I can fix this? I am using version 1.2.2.
My code:
<template>
<client-only placeholder="Loading...">
<!-- line numbers don't align correctly -->
<prism-editor
v-model="code"
v-bind="$attrs"
class="my-editor my-6"
:highlight="highlighter"
style="max-height: 300px"
></prism-editor>
</client-only>
</template>
/* required class */
.my-editor {
/* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
background: #2d2d2d;
color: #ccc;
/* you must provide font-family font-size line-height. Example: */
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
font-size: 14px;
line-height: 1.5;
padding: 5px;
}
/* optional class for removing the outline */
.prism-editor__textarea:focus {
outline: none;
}
That happens on line wrapping:
1 First very long line that is to long for
2 one line
Second line
Sorry guys but i dont see any issues. Can you provide an example via codesandbox or stackblitz?
Here's an example: https://codesandbox.io/s/condescending-star-5mrvg?file=/src/components/HelloWorld.vue
This is what it results in:
feel free to reopen this issue once you have the example link.
@koca Users cannot reopen issues closed by maintainer. The issue is quite common, it happens for long text that cannot fit into fixed width, so it breaks lines on wrapping. I'm not sure if closing this in such way is a good approach as most of people in the end may need to add some tricky workarounds based on #87 :)
Only in this repo:
- https://github.com/koca/vue-prism-editor/issues/117
- https://github.com/koca/vue-prism-editor/issues/113
- https://github.com/koca/vue-prism-editor/issues/87
- https://github.com/koca/vue-prism-editor/issues/135
Related:
- https://github.com/devmount/SongDrive/pull/78
- https://github.com/dzikoysk/reposilite/issues/1003
It's all caused by the fact that vue-prism-editor does not support horizontal scrolling of content, would be great to have it fixed! :) Or at least mentioned in README with a note, that for know it's not supported, so people can save some time for cases that kinda require such feature.
Hey @paynebc Thanks for the repro. This is a known issue, I will try to fix it this weekend. Hey @dzikoysk thanks for the feedback, im not sure whats wrong with closing duplicate issues and asking for a repro i think u misunderstand. It wasn't not my intend at all. I didnt have time recently however i will try to fix those issues this weekend im also working on a new editor which will be based on hooks. So people can have more control over the editor. Anyway i will let you guys know once i have the fixes. :)
Oh, it was just a note to feel free to reopen this issue, nothing more 😛 I could separate this from the rest, as I see it could sound unpleasant, and if so, I'm sorry.
Speaking of editor, it's always good to see new libs for Vue3, most of them are ported from 2.x and tends to fail at some point. Even with some reported glitches, in general vue-prism-editor works as expected. I've also noticed some problems related to selecting content on horizontally scrolled prism area, but I guess it was related to workarounds for the given issue, so I'm looking forward the next release :)
All good. You are right about the feel free to reopen this issue part i was sleepy and i was just copy pasting haha :) i've updated my comments ^^
Thanks :)
Hey @Alex7TCK i added a prop to toggle word wrap but there is an issue with it. Once i fix the issue i will release a new version. In the meantime you can use the workarounds discussed here https://github.com/koca/vue-prism-editor/issues/87#issuecomment-726228705
In the meantime you can use the workarounds discussed here #87 (comment)
Perhaps everyone is working on Macs, but I'm not, and for me this fix introduces some ugly scroll bars (Macs hide scrollbars).
