08 2024 档案
摘要：index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
阅读全文
摘要：src/components/AceMarkdown.tsx: import { useRef, useEffect, useState } from "react"; import { $paper, type Paper } from "../store/paper"; import ace f
阅读全文
摘要：src/components/Counter.tsx: import { useState } from "react"; interface CounterProps { count: number; } export const Counter = ({ count }: CounterProp
阅读全文
摘要：import { StrictMode } from "react"; import { useForm } from "@tanstack/react-form"; import { zodValidator } from "@tanstack/zod-form-adapter"; import
阅读全文
摘要：<html> <head> <meta name="color-scheme" content="light dark"> </head> <body> <h1>hello world</h1> <span>hello world</span> <input type="text" placehol
阅读全文
摘要：src/components/ace-markdown/ace-markdown.tsx: import { Component, Prop, State, h } from "@stencil/core"; import ace from "ace-builds/src-min-noconflic
阅读全文
摘要：stencil是一个web components开发框架。 pnpm create stencil my.counter.tsx: import { Component, h, Prop } from "@stencil/core"; @Component({ tag: "my-counter",
阅读全文
摘要：lwc是一个web components开发工具。 pnpm create lwr 选择SPA。项目生成后，一些运行时包并不在package.json中，需手动安装。 package.json: { "name": "lwrdemo", "version": "0.0.1", "license":
阅读全文
摘要：src/my.counter.ts: import { type Component, define, html } from "hybrids"; interface MyCounter { count: number; } function increaseCount(host: MyCount
阅读全文
摘要：src/index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
阅读全文
摘要：src/components/ace-markdown.ts: import { LitElement, css, html } from "lit"; import { customElement, property, query } from "lit/decorators.js"; // im
阅读全文
摘要：在vite + lit中调试好的代码my.counter.ts: import { LitElement, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; import { st
阅读全文
摘要：mkdir myproject/src -p cd myproject pnpm i lit typescript tsconfig.json: { "compilerOptions": { "target": "ES2020", "experimentalDecorators": true, "u
阅读全文
摘要：pnpm create vite@latest my-project -- --template lit cd my-project pnpm install -D tailwindcss postcss autoprefixer sass-embedded npx tailwindcss init
阅读全文
摘要：src/my-counter.ts: import { LitElement, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; import { styleMap } from
阅读全文
摘要：src/Greeting.tsx: import React from "react"; import r2wc from "@r2wc/react-to-web-component"; type GreetingProps = { name: string; }; const Greeting:
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
摘要：index.html: <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>Ariakit</title> </head
阅读全文
摘要：pnpm create vite@latest my-project -- --template react cd my-project pnpm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p tailwind
阅读全文
摘要：xrender是阿里的中后台「表单/表格/图表」开箱即用解决方案。 先采用在线工具创建一个简单的schema:simple.ts export default { "type": "object", "properties": { "title": { "title": "标题", "type":
阅读全文
摘要：pnpm create vite@latest index.html: <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/v
阅读全文
摘要：import { useState } from "react"; import AceEditor from "react-ace"; import "ace-builds/src-noconflict/mode-markdown"; import "ace-builds/src-noconfli
阅读全文
摘要：import { useState } from "react"; import { Flex } from "@radix-ui/themes"; import MDEditor from "@uiw/react-md-editor"; import { getCommands, getExtra
阅读全文
摘要：import { useState } from "react"; import { Button, Flex } from "@radix-ui/themes"; import MarkdownEditor from "@uiw/react-markdown-editor"; export def
阅读全文
摘要：<!DOCTYPE html> <html lang="zh-CN"> <head> <title>ACE in Action</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init
阅读全文
摘要：采用vite新建一个工程。修改index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s
阅读全文
摘要：本打算使用remark来解析markdown的，但vite无论如何都不能编译成功，总是缺少一堆相关依赖，并且npm上还找不到相关的包，估计是版本依赖关系问题，暂时没时间来检查修改问题，遂采用marked来解析。 <div> toolbar </div> <div style="display: fl
阅读全文
摘要：MyCounter.astro: <script> const template = ` <style> * { font-size: 200%; } span { width: 4rem; display: inline-block; text-align: center; } button {
阅读全文
摘要：先创建AstroHeart.astro: <astro-heart> <button aria-label="Heart">💜</button> × <span>0</span> </astro-heart> <script> // Define the behaviour for our new
阅读全文
摘要：import Editor from "@monaco-editor/react"; import { useState } from "react"; import Markdown from "react-markdown"; import rehypeHighlight from "rehyp
阅读全文
摘要：参见下面test.md示例： # My markdown document ```{=typst} #let foob(x) = { x + x } #foob(2) ``` this is `raw #(2 + 3) typst`{=typst} 转换并编译： pandoc test.md -o
阅读全文
摘要：采用了@monaco-editor/react进行编辑，react-markdown预览 import Editor from "@monaco-editor/react"; import { useState } from "react"; import Markdown from "react-
阅读全文
摘要：pnpm create farm@latest #选择vue3 cd project pnpm i @kangc/v-md-editor@next 修改index.ts: import { createApp } from 'vue'; // import './style.css'; import
阅读全文
摘要：cherry-markdown是一个TS编写的markdown编辑器。 import "cherry-markdown/dist/cherry-markdown.css"; <cherry-mark> <textarea></textarea> </cherry-mark> <script> imp
阅读全文
摘要：md-editor-rt是一个react markdown编辑框架。 import { useState } from "react"; import { MdEditor } from "md-editor-rt"; import "md-editor-rt/lib/style.css"; exp
阅读全文
摘要：import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import i18next from "i18next"; import { z } from "zo
阅读全文
