ace实现多主题多颜色多语言代码片段转成漂亮图片效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：ace实现多主题多颜色多语言代码片段转成漂亮图片效果代码，可以将javascript、java、php等语音的代码片段生成漂亮的图片并下载。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />


    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">

    <style>
        .ace_hidden-cursors {
            opacity: 0;
          }
          .ace_marker-layer .ace_bracket {
            border-color: transparent !important;
          }
          
          .panel-heading a {
          color: inherit!important;
        }
        .form-control {
          background: rgba(255, 255, 255, 0.8) !important;
        }
        .page {
          min-height: calc(100vh - 202px);
        }
        .a {
          color: #158cba;
          cursor: pointer;
        }
        .dropzone {
          position: relative;
          height: 180px;
          text-align: center;
          border: 1px solid #ddd;
          border-radius: 10px;
          padding-top: 30px;
        }
        .dropzone i {
          font-size: 50px;
        }
        .dropzone .upload-input {
          position: absolute;
          top: 0;
          right: 0;
          margin: 0;
          height: 100%;
          opacity: 0;
          filter: alpha(opacity=0);
          font-size: 200px !important;
          direction: ltr;
          cursor: pointer;
        }
        .preview-image {
          max-width: 100%;
        }
        .fileinput-btn {
          position: relative;
        }
        .fileinput-btn input {
          position: absolute;
          top: 0;
          right: 0;
          margin: 0;
          height: 100%;
          opacity: 0;
          filter: alpha(opacity=0);
          font-size: 200px !important;
          direction: ltr;
          cursor: pointer;
        }
        @media (min-width: 768px) {
          .gen-logo-page .scroll-body {
            height: calc(100vh - 260px);
            overflow-y: auto;
          }
          .gen-logo-page .panel-body {
            min-height: 290px;
          }
        }
        .gen-logo-page .stage {
          display: block;
          margin: 0 auto;
          transform: scale(0.25);
          -moz-transform: scale(0.25);
          -ms-transform: scale(0.25);
          -o-transform: scale(0.25);
          transform-origin: top left;
          -moz-transform-origin: top left;
          -ms-transform-origin: top left;
          -o-transform-origin: top left;
        }
        .gen-logo-page .stage__wrap {
          width: 300px;
          height: 300px;
          overflow: hidden;
        }
        .gen-logo-page .block-sample {
          float: left;
          width: 40px;
          height: 40px;
          border-radius: 10px;
          cursor: pointer;
          color: #f5f5f5;
          background: #333;
          margin-right: 5px;
          margin-bottom: 5px;
          display: flex;
          align-items: center;
          justify-content: center;
          outline: 2px solid transparent;
        }
        .gen-logo-page .block-sample.active {
          outline-color: #127ba3;
        }
        .gen-logo-page .modal {
          display: block;
        }
        .code2img-page .code-area {
          color: #cfd2d1;
          background-color: #151718;
          padding: 0 18px 18px 12px;
          box-shadow: rgba(0, 0, 0, 0.55) 0px 20px 68px;
          border-radius: 5px;
        }
        .code2img-page .code-area__wrap {
          padding: 40px;
          background: #abb8c3;
          border-radius: 5px;
        }
        .code2img-page .code-area__hd {
          position: relative;
          padding-top: 48px;
        }
        .code2img-page .code-area__hd .icon {
          position: absolute;
          top: 14px;
          display: inline-block;
          width: 12px;
          height: 12px;
          border-radius: 50%;
        }
        .code2img-page .code-area__hd .icon.is-red {
          background: #ff5e56;
          left: 0;
        }
        .code2img-page .code-area__hd .icon.is-orange {
          background: #ffbd2e;
          left: 20px;
        }
        .code2img-page .code-area__hd .icon.is-green {
          background: #27c93f;
          left: 40px;
        }
        .code2img-page .code-area__editor {
          min-height: 300px;
          background: transparent !important;
        }
        .code2img-page .code-area__editor .ace_gutter {
          width: 0 !important;
        }
        .code2img-page .code-area__editor .ace_active-line {
          background: transparent !important;
        }
    </style>

</head>

<body>

    <div class="container page code2img-page">

        <div class="row">
            <div class="col-md-12">
                <form action="#">
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="control-label">主题:</label>
                                <select id="js_themeSelect" class="form-control">
                <option value="ambiance">ambiance</option>
                <option value="chaos">chaos</option>
                <option value="chrome">chrome</option>
                <option value="clouds">clouds</option>
                <option value="cobalt">cobalt</option>
                <option value="dawn">dawn</option>
                <option value="dracula">dracula</option>
                <option value="dreamweaver">dreamweaver</option>
                <option value="eclipse">eclipse</option>
                <option value="github">github</option>
                <option value="gob">gob</option>
                <option value="gruvbox">gruvbox</option>
                <option value="monokai">monokai</option>
                <option value="terminal">terminal</option>
                <option value="textmate">textmate</option>
                <option value="tomorrow">tomorrow</option>
                <option value="twilight">twilight</option>
                <option value="xcode">xcode</option>
.........完整代码请登录后点击上方下载按钮下载查看