sbfkcel / towxml

微信小程序HTML、Markdown渲染库
https://github.com/sbfkcel/towxml/wiki
2.53k stars 320 forks source link

代码块显示到同一行了, #47

Closed glj233 closed 5 years ago

glj233 commented 5 years ago

markdown 对应如下:

//代码待续
class Solution {
    public int[] twoSum(int[] nums, int target) {

    }
}

利用 towxml 转换对应的如下代码, 未能实现换行。 代码块挤到同一行了。
PS: 感谢作者提提供的插件 (笑脸.png)

<div class="output_wrapper" id="output_wrapper_id"
    style="font-size: 16px; color: rgb(62, 62, 62); line-height: 1.6; word-spacing: 0px; letter-spacing: 0px; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;">
    <pre
        style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0px;">
        <code class="hljs cs"
            style="border-radius: 4px; margin: 0px 2px; font-family: Consolas, Inconsolata, Courier, monospace; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0px; letter-spacing: 0px; overflow-x: auto; background: rgb(244, 236, 236); color: rgb(88, 80, 80); padding: 0.5em; display: block !important; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important;">
            <span class="linenum hljs-number"
                style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; color: rgb(180, 90, 60); padding-right: 20px; word-spacing: 0px; word-wrap: inherit !important; word-break: inherit !important;">1</span><span
                class="hljs-comment"
                style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; color: rgb(101, 93, 93); word-wrap: inherit !important; word-break: inherit !important;">//代码待续</span><br><span
                class="linenum hljs-number"
                style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; color: rgb(180, 90, 60); padding-right: 20px; word-spacing: 0px; word-wrap: inherit !important; word-break: inherit !important;">2</span><span
                class="hljs-keyword"
                style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; color: rgb(132, 100, 196); word-wrap: inherit !important; word-break: inherit !important;">class</span>&nbsp;<span
                class="hljs-title"
                style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; color: rgb(114, 114, 202); word-wrap: inherit !important; word-break: inherit !important;">Solution</span>&nbsp;{<br><span
                class="linenum hljs-number"
                style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; color: rgb(180, 90, 60); padding-right: 20px; word-spacing: 0px; word-wrap: inherit !important; word-break: inherit !important;">3</span>&nbsp;&nbsp;&nbsp;&nbsp;<span
                class="hljs-function"
                style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; word-wrap: inherit !important; word-break: inherit !important;"><span
                class="hljs-keyword"
                style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; color: rgb(132, 100, 196); word-wrap: inherit !important; word-break: inherit !important;">public</span>&nbsp;<span
                class="hljs-keyword"
                style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; color: rgb(132, 100, 196); word-wrap: inherit !important; word-break: inherit !important;">int</span>[]&nbsp;<span
                class="hljs-title"
                style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; color: rgb(114, 114, 202); word-wrap: inherit !important; word-break: inherit !important;">twoSum</span>(<span
                class="hljs-params"
                style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; color: rgb(180, 90, 60); word-wrap: inherit !important; word-break: inherit !important;"><span
                    class="hljs-keyword"
                    style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; color: rgb(132, 100, 196); word-wrap: inherit !important; word-break: inherit !important;">int</span>[]&nbsp;nums,&nbsp;<span
                    class="hljs-keyword"
                    style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; color: rgb(132, 100, 196); word-wrap: inherit !important; word-break: inherit !important;">int</span>&nbsp;target</span>)&nbsp;</span>{<br><span
                class="linenum hljs-number"
                style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; color: rgb(180, 90, 60); padding-right: 20px; word-spacing: 0px; word-wrap: inherit !important; word-break: inherit !important;">4</span><br><span
                class="linenum hljs-number"
                style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; color: rgb(180, 90, 60); padding-right: 20px; word-spacing: 0px; word-wrap: inherit !important; word-break: inherit !important;">5</span>&nbsp;&nbsp;&nbsp;&nbsp;}<br><span
                class="linenum hljs-number"
                style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; color: rgb(180, 90, 60); padding-right: 20px; word-spacing: 0px; word-wrap: inherit !important; word-break: inherit !important;">6</span>}<br>
        </code>
    </pre>
</div>
sbfkcel commented 5 years ago

发完整代码

glj233 commented 5 years ago

发完整代码

已更新

sbfkcel commented 5 years ago

小程序的代码呢。发个包吧。

glj233 commented 5 years ago

小程序的代码呢。发个包吧。

demo.zip

框架是插件中的,基本没有改变,只是把服务器换成自己的了。

sbfkcel commented 5 years ago

插件支持的代码高亮html需要与hljs的规范一致,请参考以下代码片段。

高亮的:

<pre class="hljs language-java"><code><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Solution</span> </span>{
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">int</span>[] twoSum(<span class="hljs-keyword">int</span>[] nums, <span class="hljs-keyword">int</span> target) {

    }
}
</code></pre>

不高亮的:

<pre class="hljs"><code>class Solution {
    public int[] twoSum(int[] nums, int target) {

    }
}
</code></pre>

建议你直接用makdown来处理会比较简单且更好。