leon-kfd /
OnlineCodeEditor
A simple code editor like CodePen, built by Vue3
57/100 healthLoading repository data…
uiwjs / repository
A simple code editor with syntax highlighting.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
A simple code editor with syntax highlighting. This library aims to provide a simple code editor with syntax highlighting support without any of the extra features, perfect for simple embeds and forms where users can submit code.
Features:
@v2.$ npm i @uiw/react-textarea-code-editor
https://uiwjs.github.io/react-textarea-code-editor/
import React, { useState } from "react";
import CodeEditor from '@uiw/react-textarea-code-editor';
export default function App() {
const [code, setCode] = useState(
`function add(a, b) {\n return a + b;\n}`
);
return (
<CodeEditor
value={code}
language="js"
placeholder="Please enter JS code."
onChange={(evn) => setCode(evn.target.value)}
padding={15}
style={{
backgroundColor: "#f5f5f5",
fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
}}
/>
);
}
List of rehype plugins to use.
import CodeEditor from '@uiw/react-textarea-code-editor';
import rehypePrism from "rehype-prism-plus";
import rehypeRewrite from "rehype-rewrite";
import "./styles.css";
function App() {
const [code, setCode] = React.useState(
`function add(a, b) {\n return a + b;\n}`
);
return (
<CodeEditor
value={code}
language="js"
placeholder="Please enter JS code."
onChange={(evn) => setCode(evn.target.value)}
padding={15}
rehypePlugins={[
[rehypePrism, { ignoreMissing: true }],
[
rehypeRewrite,
{
rewrite: (node, index, parent) => {
if (node.properties?.className?.includes("code-line")) {
if (index === 0 && node.properties?.className) {
node.properties.className.push("demo01");
// console.log("~~~", index, node.properties?.className);
}
}
if (node.type === "text" && node.value === "return" && parent.children.length === 1) {
parent.properties.className.push("demo123");
}
}
}
]
]}
style={{
fontSize: 12,
backgroundColor: "#f5f5f5",
fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
}}
/>
);
}
The following example can help you exclude code highlighting
Selected from shared topics, language and repository description—not editorial ratings.
leon-kfd /
A simple code editor like CodePen, built by Vue3
57/100 healthhrahul2605 /
ChaloMilkeCodeKarein - A simple collaborative code editor to help you code & chat with your friends simultaneously.
37/100 healthKaikSelhorst /
A simple code editor for Markdown
cau777 /
A platform that allows users to write and post snippets different languages with a simple code editor, like other snippets, and follow other users. It was inspired by Twitter and GitHub, and made using React, Typescript, ASP .Net Core and Entity Framework.
41/100 healthNKCcoin /
What are token lists? Uniswap Token Lists is a specification for lists of token metadata (e.g. address, decimals, ...) that can be used by any dApp interfaces that needs one or more lists of tokens. Anyone can create and maintain a token list, as long as they follow the specification. Specifically an instance of a token list is aJSONblob that contains a list ofERC20token metadata for use in dApp user interfaces. Token list JSON must validate against theJSON schemain order to be used in the Uniswap Interface. Tokens on token lists, and token lists themselves, are tagged so that users can easily find tokens. JSON Schema $id The JSON schema ID ishttps://uniswap.org/tokenlist.schema.json Validating token lists This package does not include code for token list validation. You can easily do this by including a library such asajvto perform the validation against the JSON schema. The schema is exported from the package for ease of use. Authoring token lists Manual The best way to manually author token lists is to use an editor that supports JSON schema validation. Most popular code editors do, such asIntelliJorVSCode. Other editors can be foundhere. The schema is registered in theSchemaStore, and any file that matches the pattern*.tokenlist.jsonshouldautomatically utilizethe JSON schema for thesupported text editors. In order for your token list to be able to be used, it must pass all JSON schema validation. Automated If you want to automate token listing, e.g. by pulling from a smart contract, or other sources, you can use this npm package to take advantage of the JSON schema for validation and the TypeScript types. Otherwise, you are simply working with JSON. All the usual tools apply, e.g.: import { TokenList, schema } from '@uniswap/token-lists' // generate your token list however you like. const myList: TokenList = generateMyTokenList(); // use a tool like `ajv` to validate your generated token list validateMyTokenList(myList, schema); // print the resulting JSON to stdout process.stdout.write(JSON.stringify(myList)); Semantic versioning Lists include aversionfield, which followssemantic versioning. List versions must follow the rules: Increment major version when tokens are removed Increment minor version when tokens are added Increment patch version when tokens already on the list have minor details changed (name, symbol, logo URL, decimals) Changing a token address or chain ID is considered both a remove and an add, and should be a major version update. Note that list versioning is used to improve the user experience, but not for security, i.e. list versions are not meant to provide protection against malicious updates to a token list; i.e. the list semver is used as a lossy compression of the diff of list updates. List updates may still be diffed in the client dApp. Deploying your list Once you have authored the list, you can make it available at any URI. Prefer pinning your list to IPFS (e.g. viapinata.cloud) and referencing the list by an ENS name that resolves to thecontenthash. If hosted on HTTPS, make sure the endpoint is configured to send an access-control-allow-origin header to avoid CORS errors. Linking an ENS name to the list An ENS name can be assigned to an IPFS hash via thecontenthashtext record. This is the preferred way of referencing your list. Examples You can find a simple example of a token list intest/schema/example.tokenlist.json. A snapshot of the Uniswap default list encoded as a token list is found intest/schema/bigexample.tokenlist.json
37/100 healthAritraLeo /
A simple code editor
33/100 health