Làm nổi bật mã nguồn trong Gutenberg với plugin Syntax-highlighting Code Block

import sys

class TodoItem:
    def __init__(self, task):
        self.task = task
        self.completed = False

    def mark_done(self):
        self.completed = True

    def __str__(self):
        status = "✔" if self.completed else "✘"
        return f"[{status}] {self.task}"

class TodoList:
    def __init__(self):
        self.items = []

    def add(self, task):
        self.items.append(TodoItem(task))

    def list(self):
        if not self.items:
            print("No tasks found.")
        for idx, item in enumerate(self.items, start=1):
            print(f"{idx}. {item}")

    def mark_done(self, index):
        if 0 <= index < len(self.items):
            self.items[index].mark_done()
            print("Task marked as done.")
        else:
            print("Invalid task number.")

def print_menu():
    print("\nTodo List")
    print("1. Add task")
    print("2. View tasks")
    print("3. Mark task as done")
    print("4. Exit")

def main():
    todo = TodoList()
    while True:
        print_menu()
        choice = input("Enter choice: ").strip()
        if choice == "1":
            task = input("Enter task: ")
            todo.add(task)
        elif choice == "2":
            todo.list()
        elif choice == "3":
            todo.list()
            index = int(input("Enter task number to mark done: ")) - 1
            todo.mark_done(index)
        elif choice == "4":
            print("Goodbye!")
            sys.exit()
        else:
            print("Invalid option.")

if __name__ == "__main__":
    main()Code language: Python (python)

add_filter('render_block', 'render_block_copy_button', 10, 2);

function render_block_copy_button( $content, $block ) {
	if ( 'core/code' !== $block['blockName'] || empty( $block['innerHTML'] ) ) {
		return $content;
	}

	// Get the code content and prepare JavaScript
	$code = wp_strip_all_tags( $block['innerHTML'] );
	$copy_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
	$check_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"></path></svg>';
	$js = "try { navigator.clipboard.writeText(this.getAttribute('data-code')); this.classList.add('copied'); this.innerHTML = '$check_icon'; const msg = this.nextElementSibling; msg.style.display = 'inline-block'; msg.style.opacity = '1'; setTimeout(() => { this.classList.remove('copied'); this.innerHTML = '$copy_icon'; msg.style.transition = 'opacity 0.5s'; msg.style.opacity = '0'; setTimeout(() => { msg.style.display = 'none'; }, 500); }, 1000); } catch (e) { this.classList.add('error'); setTimeout(() => this.classList.remove('error'), 1000); }";

	// Create the button with SVG icon and message span
	$button = sprintf(
		'<button class="code-copy-button" data-code="%1$s" onclick="%2$s" title="%3$s">%4$s</button><span class="copy-message" style="display: none;">%5$s</span>',
		esc_attr( $code ),
		esc_attr( $js ),
		esc_attr__( 'Copy code to clipboard', 'text-domain' ),
		$copy_icon,
		esc_html__( 'Copied to clipboard', 'text-domain' )
	);

	// Wrap content and button in a container with relative positioning
	$wrapped_content = sprintf(
		'<div class="code-block-wrapper" style="position: relative;">%s%s</div>',
		$content,
		$button
	);

	return $wrapped_content;
}Code language: HTML, XML (xml)

.code-block-wrapper {
	position: relative;
}

.code-copy-button {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 6px;
	background-color: #FFF;
	cursor: pointer;
	color: #0e61aa;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
}

.code-copy-button:hover,
		.code-copy-button:focus {
	background-color: #0e61aa;
	border-color: #FFF;
}

.code-copy-button.copied {
	background-color: #0e61aa;
	border-color: #FFF;
	color: #FFF;
}

.code-copy-button.error {
	background-color: #f8d7da;
	border-color: #f5c6cb;
}

.code-copy-button svg {
	width: 16px;
	height: 16px;
}

.copy-message {
	position: absolute;
	top: 8px;
	right: 42px;
	background-color: #FFF;
	color: #0e61aa;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	white-space: nowrap;
	z-index: 10;
	display: none;
	opacity: 0;
	line-height: 20px;
}Code language: CSS (css)

function filter_comment_text( $comment_text ) {
	if ( ! function_exists( '\Syntax_Highlighting_Code_Block\render_block' ) ) {
		return $comment_text;
	}

	$registry   = WP_Block_Type_Registry::get_instance();
	$block_type = $registry->get_registered( 'core/code' );
	if ( ! $block_type instanceof WP_Block_Type ) {
		return $comment_text;
	}

	$attributes = [];
	foreach ( $block_type->attributes as $name => $schema ) {
		if ( isset( $schema['default'] ) ) {
			$attributes[ $name ] = $schema['default'];
		}
	}

	$pattern = implode(
		'',
		[
			'(?<=^|\n)',
			'(<pre[^>]*?>\s*)?',
			'<code[^>]*?>(?P<contents>[^<]*?)</code>',
			'(\s*</pre>)?',
			'(?=\r?\n|$)',
		]
	);

	return preg_replace_callback(
		"#{$pattern}#si",
		static function( $matches ) use ( $attributes ) {
			$contents = $matches['contents'];
			$before   = '<pre><code>';
			$after    = '</code></pre>';
			return \Syntax_Highlighting_Code_Block\render_block( $attributes, $before . $contents . $after );
		},
		$comment_text
	);
}

add_filter( 'comment_text', __NAMESPACE__ . '\filter_comment_text', 20 );Code language: PHP (php)