dvcp_v2_webapp/ui/packages/basic/AiArticle.vue

<template>
  <div class="ai-article">
    <div v-html="value"></div>
  </div>
</template>

<script>
  export default {
    name: 'AiArticle',

    props: {
      value: {
        type: String
      }
    }
  }
</script> 

<style lang="scss" scoped>
  .ai-article {
    width: 100%;
    line-height: 1.75;
    font-weight: 400;
    color: #333;
    font-size: 14px;
    text-align: justify;
    overflow-x: auto;
    word-break: break-word;
    
    ::v-deep h1 {
      margin: 1.3rem 0;
      line-height: 1.2
    }
    
    ::v-deep p {
      line-height: 2.27rem
    }
    
    ::v-deep hr {
      border: none;
      border-top: 1px solid #ddd;
      margin-top: 2.7rem;
      margin-bottom: 2.7rem
    }
    
    ::v-deep img:not(.equation), ::v-deep iframe, ::v-deep embed, ::v-deep video {
      display: block;
      margin: 18px auto;
      max-width: 100% !important;
    }
    
    ::v-deep img.equation {
      margin: 0 .1em;
      max-width: 100% !important;
      vertical-align: middle
    }

    ::v-deep figure {
      margin: 2.7rem auto;
      text-align: center
    }

    ::v-deep img:not(.equation) {
      cursor: zoom-in
    }

    ::v-deep figure figcaption {
      text-align: center;
      font-size: 1rem;
      line-height: 2.7rem;
      color: #909090
    }

    ::v-deep pre {
      line-height: 1.93rem;
      overflow: auto
    }

    ::v-deep code,
    ::v-deep pre {
      font-family: Menlo, Monaco, Consolas, Courier New, monospace
    }

    ::v-deep code {
      font-size: 1rem;
      padding: .26rem .53em;
      word-break: break-word;
      color: #4e5980;
      background-color: #f8f8f8;
      border-radius: 2px;
      overflow-x: auto
    }
    
    ::v-deep pre>code {
      font-size: 1rem;
      padding: .67rem 1.3rem;
      margin: 0;
      word-break: normal;
      display: block
    }
    
    ::v-deep a {
      color: #259
    }

    ::v-deep a:active,
    ::v-deep a:hover {
      color: #275b8c
    }

    ::v-deep table {
      width: 100%;
      margin-top: 18px;
      margin-bottom: 18px;
      overflow: auto;
      font-size: 1rem;
      text-align: center;
      border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
    }

    ::v-deep thead {
      background: #f6f6f6;
      color: #000;
      text-align: left
    }

    ::v-deep td,
    ::v-deep th {
      padding: 3px 5px;
      border-bottom: 1px solid #ccc;
      border-right: 1px solid #ccc;
    }
    
    ::v-deep td {
      min-width: 10rem
    }

    ::v-deep blockquote {
      margin: 1em 0;
      border-left: 4px solid #ddd;
      padding: 0 1.3rem
    }

    ::v-deep blockquote>p {
      margin: .6rem 0
    }

    ::v-deep ol,
    ::v-deep ul {
      padding-left: 2.7rem
    }

    ::v-deep ol li,
    ::v-deep ul li {
      margin-bottom: .6rem
    }

    ::v-deep ol ol,
    ::v-deep ol ul,
    ::v-deep ul ol,
    ::v-deep ul ul {
      margin-top: .27rem
    }

    ::v-deep pre>code {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      color: #333;
      background: #f8f8f8
    }

    ::v-deep p {
      line-height: inherit;
      margin-top: 18px;
      margin-bottom: 18px
    }

    ::v-deep img {
      max-height: none
    }

    ::v-deep a {
      color: #0269c8;
      border-bottom: 1px solid #d1e9ff
    }

    ::v-deep code {
      background-color: #fff5f5;
      color: #ff502c;
      font-size: .87em;
      padding: .065em .4em
    }

    ::v-deep blockquote {
      color: #666;
      padding: 1px 23px;
      margin: 18px 0;
      border-left: 4px solid #cbcbcb;
      background-color: #f8f8f8
    }

    ::v-deep blockquote:after {
      display: block;
      content: ""
    }

    ::v-deep blockquote>p {
      margin: 10px 0
    }

    ::v-deep blockquote.warning {
      position: relative;
      border-left-color: #f75151;
      margin-left: 8px
    }

    ::v-deep blockquote.warning:before {
      position: absolute;
      top: 14px;
      left: -12px;
      background: #f75151;
      border-radius: 50%;
      content: "!";
      width: 20px;
      height: 20px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center
    }

    ::v-deep ol,
    ::v-deep ul {
      padding-left: 28px
    }

    ::v-deep ol li,
    ::v-deep ul li {
      margin-bottom: 0;
      list-style: inherit
    }

    ::v-deep ol li.task-list-item,
    ::v-deep ul li.task-list-item {
      list-style: none
    }

    ::v-deep ol li.task-list-item ol,
    ::v-deep ol li.task-list-item ul,
    ::v-deep ul li.task-list-item ol,
    ::v-deep ul li.task-list-item ul {
      margin-top: 0
    }

    ::v-deep ol li {
      padding-left: 6px
    }

    ::v-deep pre {
      position: relative;
      line-height: 1.75
    }

    ::v-deep pre>code {
      padding: 15px 12px
    }

    ::v-deep pre>code.hljs[lang] {
      padding: 18px 15px 12px
    }

    ::v-deep h1,
    ::v-deep h2,
    ::v-deep h3,
    ::v-deep h4,
    ::v-deep h5,
    ::v-deep h6 {
      color: #333;
      line-height: 1.5;
      margin-top: 35px;
      margin-bottom: 10px;
      padding-bottom: 5px;
      font-weight: 500;
    }

    ::v-deep h1 {
      font-size: 30px;
      margin-bottom: 5px
    }

    ::v-deep h2 {
      padding-bottom: 12px;
      font-size: 24px;
      border-bottom: 1px solid #ececec
    }

    ::v-deep h3 {
      font-size: 18px;
      padding-bottom: 0
    }

    ::v-deep h4 {
      font-size: 16px
    }

    ::v-deep h5 {
      font-size: 15px
    }

    ::v-deep h6 {
      margin-top: 5px
    }

    ::v-deep h1.heading+h2.heading {
      margin-top: 20px
    }

    ::v-deep h1.heading+h3.heading {
      margin-top: 15px
    }

    ::v-deep .heading+.heading {
      margin-top: 0
    }

    ::v-deep h1+:not(.heading) {
      margin-top: 25px
    }
  }
</style>