hexo-kotlin-playground

使Hexo的Code Block支持Kotlin Playground

Usage no npm install needed!

<script type="module">
  import hexoKotlinPlayground from 'https://cdn.skypack.dev/hexo-kotlin-playground';
</script>

README

Hexo Kotlin Playground

使Hexo的CodeBlock支持Kotlin Playground

使用方法

安装
npm install hexo-kotlin-playground
启用插件
  1. 拷贝样例_config.yml内的内容至你的_config.yml
  2. 设置disable_plugin: ~disable_plugin: false
  3. 启用代码块,可以选择设置_config.ymlenable_all: true或在每个代码块进行独立设置

独立设置

  • 在每个代码块开头,可以以一行//@playground注释开头,将自动解析后面的配置,比如

    //@playground enable line-number=false
    fun main(){
      println("Hello Kotlin")
    }
    

    将自动解析enable来启用该代码块的playground,line-number=false将禁用该代码块的行号显示

    支持 key | key=value | key='value' | key="value" 四种格式的设置 支持如下设置:

  • 支持使用别名来指定参数名

    如:
    version => data-version
    platform => data-target-platform
    readonly => data-highlight-only
    ...
    更多可以看SpecialConfigKey

    其他别名

  • 隐藏代码 在代码块中插入以//@hidestart,以//@hideend结尾的,即可隐藏这段代码块中间的内容 如:

    fun main(){
      println(str)
    }
    //@hidestart
    val str = "Hello Kotlin"
    //@hideend
    
  • 仅显示代码 在代码块中插入以//sampleStart,以//sampleEnd结尾,即可只显示这块代码中间的内容 忽略此注释则使用代码块的none-markers属性 取消显示隐藏代码的按钮则设置代码块的属性folded-buttonfalse(folded-button=false)

    这部分和Kotlin Playground Customizing editors官方使用方法一样

其他

  • 适配 next的copy-btn
    在配置文件_config.yml启用拓展js内容
    kotlin_playground:
      extend:
        js: "source/_data/kotlin_playground.js"
    
    添加如下内容
    const ktpgOptions = {
      callback: (targetNode, mountNode) => {
        mountNode.querySelector('.CodeMirror-lines').classList.add('code')
        mountNode.querySelectorAll('.CodeMirror-line').forEach(element => {
          element.classList.add('line')
        })
      }
    }