kucherenko / jscpd

Describe the bug

To Reproduce
Steps to reproduce the behavior:

1.js as same with 2.js

const axios = require('axios')

function test ({ code, message, _, response }) => { // 服务端响应为非 200 的场景, 都到 catch 这里
  console.log(`hello !@#LK><M>
\n
          <M`)
  console.log('hello !@#LK><M> \n <M')

  return axios(option).then((response) => {
    const { code, success, message, data } = response.data || {}
    const ok = (!!success && code === '200')
    return ok
  })
}

run command npx jscpd -r html ./*.js

Expected behavior
render code correctly

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

OS: linux
OS Version alpine 3.16.2
NodeJS Version v16.17.1
jscpd version 3.5.1

Additional context

render clone.fragment as html, may fix this bug.

ref: https://vuejs.org/guide/essentials/template-syntax.html#raw-html

I confirm the problem. Plus, using npx jscpd@3.4.5 does not fix it, surely because the @jscpd/html-reporter package is installed to the latest version. I did not find any way to workaround this.

Here is the change I suspect it introduces the bug: 5dc30bf

cc @kucherenko @zhaoyi

To me, the previously mentionned commit should be reverted.

We should not escape the duplicate code output, because we need to be able to correctly see them.

Instead, we should use the code and pre tags on this part:

jscpd/packages/html-reporter/mockups/src/components/Clone.vue

Line 31 in 9b91ec7

<pre class="text-left bg-gray-100 p-5 text-sm">{{ clone.fragment }}</pre>

UPDATE: I just figured out the pre tags is already used, so we need the code one.

@kucherenko I am looking for a way to fix it, but I have no indication of how to play with the dev env and no automated test. Also, the originally "fixed" issue does not provide any concrete sample to verify it.

Could you please give me some hints?

HTML report does not render code correctly