Làm thế nào để có thể nhúng source code vào bài viết trên Blogger?

Nói nhảm

Là một developer mình luôn luôn muốn chia sẻ những gì mình học được tới mọi người. Và một trong những cách đó là ngồi viết nhảm nhí trên blog :). Hôm nay chợt nảy ra ý định muốn tạo các bài hướng dẫn các sử dụng ReatJs từ cơ bản tới không còn cơ bản nữa. Nhưng chợt nhận ra mình không có khả năng viết lách lắm :)

Nói hơi nhảm xíu nhé mọi người. Nhưng nếu ai ủng hộ mình viết một series hướng dẫn lập trình web sử dụng ReactJs thì comment bên dưới nhé. Còn bây giờ quay lại chủ đề chính của mình trong bài viết này là làm sao có thể nhúng đoạn code đẹp trai này vào bất cứ blog nào hỗ trợ soạn HTML.

Javascript

1	console.log("Bạn rất đẹp trai");

Python

1	print("Bạn còn đẹp trai hơn")

và có rất nhiều ngôn ngữ khác nữa. Wow nghề viết lách lại không đơn giản :)

Nói thật

Mình có hỏi bạn bè đồng nghiệp và rồi hỏi anh Google thân thuộc thì hiện tại tìm được hai giải pháp có thể giúp anh em code tung trời và trình bày đẹp trai trên bài viết của mình.

Cách thứ 1

Đầu tiên phải kể đến anh Github có một tính năng chia sẻ các file nhỏ là Gist. Anh em có thể tạo các files này với extension tương ứng với ngôn ngữ mình code. Sau đó có thể lấy link embed và website. Cách này ngon bổ rẻ và có thể version control source code của mình. Cách này phù hợp với các file lớn nhiều code :) Hình ảnh minh hoạ bên dưới.

Lấy embed link từ Gist

	import React from "react";
	class Carousel extends React.Component {
	state = { photos: [], active: 0 };
	static getDerivedStateFromProps({ media }) {
	let photos = ["http://placecorgi.com/600/600"];
	if (media.length) {
	photos = media.map(({ large }) => large);
	}
	return { photos };
	}
	render() {
	const { photos, active } = this.state;
	return (
	<div className="carousel">
	<img src={photos[active]} alt="animal" />
	<div className="carousel-smaller">
	{photos.map((photo, index) => (
	<img
	key={photo}
	src={photo}
	className={index === active ? "active" : ""}
	alt="animal thumbnail"
	/>
	))}
	</div>
	</div>
	);
	}
	}
	export default Carousel;

view raw Carousel.js hosted with ❤ by GitHub

Cách thứ 2

Cách này phù hợp khi bạn trình bày các đoạn code nhỏ, các câu lệnh đơn và đặc biệt là hỗ trọ rất nhiều ngôn ngữ khác nhau. Bạn có thể truy cập vào hilite.me copy đoạn code bạn muốn highlight rồi paste và ô Source code. Bạn sẽ nhận được đoạn code html đã được gen ra. Lấy đoạn code đó và nhúng và website. 

Lấy source code html

Hi vọng là từ nay mọi người có thể không gặp khó khăn trong việc chia sẻ kiến thức tới người khác rồi :)

Happy coding !