雨化田

「式」代码高亮插件演示

🚧 该插件正处于开发中，此为测试版本效果

语言

一些小众语言的高亮效果

CoffeeScript

# Assignment:
number   = 42
opposite = true

# Conditions:
number = -42 if opposite

# Functions:
square = (x) -> x * x

# Arrays:
list = [1, 2, 3, 4, 5]

# Objects:
math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x

# Splats:
race = (winner, runners...) ->
  print winner, runners

# Existence:
alert "I knew it!" if elvis?

# Array comprehensions:
cubes = (math.cube num for num in list)

APL

CND ← {
    X ← ⍵
    a ← 0.31938153 ¯0.356563782 1.781477937 ¯1.821255978 1.330274429

    l ← |X
    k ← ÷1+0.2316419×l
    w ← 1 - (÷((2×(○1))*0.5)) × (*-(l×l)÷2) × (a +.× (k*⍳5))

    ((|0⌊×X)×(1-w))+(1-|0⌊×X)×w
}

⍝ S - current price
⍝ X - strike price
⍝ T - expiry in years
⍝ r - riskless interest rate
⍝ v - volatility

S ← 60
X ← 65
T ← 1
r ← 0.1
v ← 0.2

d1 ← { ((⍟S÷X)+(r+(v*2)÷2)×⍵)÷(v×⍵*0.5) }
d2 ← { (d1 ⍵) -v×⍵*0.5 }

⍝ Call price
callPrice ← { (S×CND(d1 ⍵))-(X×*-r×⍵)×CND(d2 ⍵) }

文言

吾有一術。名之曰「埃氏篩」。欲行是術。必先得一數。曰「甲」。乃行是術曰。
	吾有一列。名之曰「掩」。為是「甲」遍。充「掩」以陽也。
	除「甲」以二。名之曰「甲半」。

	有數二。名之曰「戊」。恆為是。若「戊」不小於「甲半」者乃止也。
		有數二。名之曰「戌」。恆為是。若「戌」不小於「甲半」者乃止也。

			乘「戊」以「戌」。名之曰「合」
			若「合」不大於「甲」者。
				昔之「掩」之「合」者。今陰是矣。
			若非乃止也。
		加一以「戌」。昔之「戌」者。今其是矣云云。
	加一以「戊」。昔之「戊」者。今其是矣云云。

	吾有一列。名之曰「諸素」。
	昔之「戊」者。今二是矣。恆為是。若「戊」等於「掩」之長者乃止也。
		夫「掩」之「戊」。名之曰「素耶」。
		若「素耶」者充「諸素」以「戊」也。
	加一以「戊」。昔之「戊」者。今其是矣云云。
	乃得「諸素」。
是謂「埃氏篩」之術也。

施「埃氏篩」於一百。書之。

转换器

内置转换器的效果

transformerNotationDiff

使用 [!code ++] 和 [!code --] 来标记增删的行。

console.log('hewwo') // [!code --]
console.log('hello') // [!code ++]
console.log('goodbye')

transformerNotationHighlight

使用 [!code highlight] 来高亮显示行。

console.log('Not highlighted')
console.log('Highlighted') // [!code highlight]
console.log('Not highlighted')

transformerNotationWordHighlight

使用 [!code word:Hello] 在接下来的代码高亮所有的 Hello。

// [!code word:Hello]
const message = 'Hello World'
console.log(message) // prints Hello World

transformerNotationFocus

使用 [!code focus] 来聚焦显示行。

console.log('Not focused');
console.log('Focused') // [!code focus]
console.log('Not focused');

transformerNotationErrorLevel

使用 [!code error] 和 [!code warning] 来指定行的日志等级。

console.log('No errors or warnings')
console.error('Error') // [!code error]
console.warn('Warning') // [!code warning]

代码选项卡

使用分栏卡片与 [!code tab:<title>] 指令生成带有 Magic Move 的代码选项卡

# [!code tab:npm]
$ cd <your-project-name>
$ npm install
$ npm run dev

# [!code tab:pnpm]
$ cd <your-project-name>
$ pnpm install
$ pnpm run dev

# [!code tab:yarn]
$ cd <your-project-name>
$ yarn
$ yarn dev

[!code tab:选项式]
<script setup>
import { ref, computed } from 'vue'

const count = ref(1)
const double = computed(() => count.value * 2)
</script>

<template>
  <p class="greeting">{{ count }} = {{ doubled / 2 }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

[!code tab:组合式]
<script>
import { defineComponent } from 'vue'

export default defineComponent({
  data: () => ({
    count: 1
  }),
  computed: {
    double() {
      return this.count * 2
    }
  },
})
</script>

<template>
  <p class="greeting">{{ count }} * 2 = {{ doubled }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>