Anki: Add Tone Colours to Pinyin Automatically

[markhavemann]

I couldn't find any solutions that I liked on the internet, so I made my own to do this.

 

From:

To:

 

 

What it can add colours to:

• pòfǔchénzhōu (no spaces between syllables)
• pò fǔ chén zhōu (spaces between syllables)
• pòfǔ chénzhōu (a combination of the two)
• pòfǔchén<b>zhōu</b> (also works with html tags, but not thoroughly tested)

 

What it doesn't work for:

• My chengyu is: pòfǔ chénzhōu  (other text mixed in with pinyin - you will get weird results. I might fix this later and make it more flexible)

 

I also made as youtube video showing the process of doing this: https://www.youtube.com/watch?v=TGpXhZ4wjjU

 

The Code:

 

Pinyin Field:

Spoiler

<span id="pinyin">{{ChangeThisToYourPinyinFieldName}}</span>

 

Main Code:

Spoiler

<script>

syllables = [

"a",

"ai",

"an",

"ang",

"ao",

"ba",

"bai",

"ban",

"bang",

"bao",

"bei",

"ben",

"beng",

"bi",

"bian",

"biao",

"bie",

"bin",

"bing",

"bo",

"bu",

"ca",

"cai",

"can",

"cang",

"cao",

"ce",

"cei",

"cen",

"ceng",

"cha",

"chai",

"chan",

"chang",

"chao",

"che",

"chen",

"cheng",

"chi",

"chong",

"chou",

"chu",

"chua",

"chuai",

"chuan",

"chuang",

"chui",

"chun",

"chuo",

"ci",

"cong",

"cou",

"cu",

"cuan",

"cui",

"cun",

"cuo",

"da",

"dai",

"dan",

"dang",

"dao",

"de",

"dei",

"den",

"deng",

"di",

"dian",

"diao",

"die",

"ding",

"diu",

"dong",

"dou",

"du",

"duan",

"dui",

"dun",

"duo",

"e",

"ei",

"en",

"er",

"fa",

"fan",

"fang",

"fei",

"fen",

"feng",

"fo",

"fou",

"fu",

"ga",

"gai",

"gan",

"gang",

"gao",

"ge",

"gei",

"gen",

"geng",

"gong",

"gou",

"gu",

"gua",

"guai",

"guan",

"guang",

"gui",

"gun",

"guo",

"ha",

"hai",

"han",

"hang",

"hao",

"he",

"hei",

"hen",

"heng",

"hm",

"hng",

"hong",

"hou",

"hu",

"hua",

"huai",

"huan",

"huang",

"hui",

"hun",

"huo",

"ji",

"jia",

"jian",

"jiang",

"jiao",

"jie",

"jin",

"jing",

"jiong",

"jiu",

"ju",

"juan",

"jue",

"jun",

"ka",

"kai",

"kan",

"kang",

"kao",

"ke",

"kei",

"ken",

"keng",

"kong",

"kou",

"ku",

"kua",

"kuai",

"kuan",

"kuang",

"kui",

"kun",

"kuo",

"lü",

"la",

"lai",

"lan",

"lang",

"lao",

"le",

"lüe",

"lei",

"leng",

"li",

"lia",

"lian",

"liang",

"liao",

"lie",

"lin",

"ling",

"liu",

"long",

"lou",

"lu",

"luan",

"lun",

"luo",

"m",

"ma",

"mai",

"man",

"mang",

"mao",

"me",

"mei",

"men",

"meng",

"mi",

"mian",

"miao",

"mie",

"min",

"ming",

"miu",

"mo",

"mou",

"mu",

"n",

"nü",

"na",

"nai",

"nan",

"nang",

"nao",

"ne",

"nüe",

"nei",

"nen",

"neng",

"ng",

"ni",

"nian",

"niang",

"niao",

"nie",

"nin",

"ning",

"niu",

"nong",

"nou",

"nu",

"nuan",

"nuo",

"o",

"ou",

"pa",

"pai",

"pan",

"pang",

"pao",

"pei",

"pen",

"peng",

"pi",

"pian",

"piao",

"pie",

"pin",

"ping",

"po",

"pou",

"pu",

"qi",

"qia",

"qian",

"qiang",

"qiao",

"qie",

"qin",

"qing",

"qiong",

"qiu",

"qu",

"quan",

"que",

"qun",

"ran",

"rang",

"rao",

"re",

"ren",

"reng",

"ri",

"rong",

"rou",

"ru",

"rua",

"ruan",

"rui",

"run",

"ruo",

"sa",

"sai",

"san",

"sang",

"sao",

"se",

"sei",

"sen",

"seng",

"sha",

"shai",

"shan",

"shang",

"shao",

"she",

"shei",

"shen",

"sheng",

"shi",

"shou",

"shu",

"shua",

"shuai",

"shuan",

"shuang",

"shui",

"shun",

"shuo",

"si",

"song",

"sou",

"su",

"suan",

"sui",

"sun",

"suo",

"ta",

"tai",

"tan",

"tang",

"tao",

"te",

"teng",

"ti",

"tian",

"tiao",

"tie",

"ting",

"tong",

"tou",

"tu",

"tuan",

"tui",

"tun",

"tuo",

"wa",

"wai",

"wan",

"wang",

"wei",

"wen",

"weng",

"wo",

"wu",

"xi",

"xia",

"xian",

"xiang",

"xiao",

"xie",

"xin",

"xing",

"xiong",

"xiu",

"xu",

"xuan",

"xue",

"xun",

"ya",

"yan",

"yang",

"yao",

"ye",

"yi",

"yin",

"ying",

"yong",

"you",

"yu",

"yuan",

"yue",

"yun",

"za",

"zai",

"zan",

"zang",

"zao",

"ze",

"zei",

"zen",

"zeng",

"zha",

"zhai",

"zhan",

"zhang",

"zhao",

"zhe",

"zhei",

"zhen",

"zheng",

"zhi",

"zhong",

"zhou",

"zhu",

"zhua",

"zhuai",

"zhuan",

"zhuang",

"zhui",

"zhun",

"zhuo",

"zi",

"zong",

"zou",

"zuan",

"zui",

"zun",

"zuo",

"zu"

]

 

var pinyinContent = document.getElementById("pinyin").innerText;

pinyinContent = pinyinContent.toString();

pinyinContent = pinyinContent.replace(/\u00a0/g, " "); //replace nbsp with space char - necessary in Anki

pinyinContent = pinyinContent.split(' ');

pinyinContent = pinyinSplit(pinyinContent);

console.log(pinyinContent)

 

output = '';

 

for (i = 0; i < pinyinContent.length; i++) {

if(pinyinContent.match(/.*[āēīōūǖĀĒĪŌŪǕ].*/g))

output = output + '<span class="t1">' + pinyinContent + '</span> ';

else if(pinyinContent.match(/.*[áéíóúǘÁÉÍÓÚǗ].*/g))

output = output + '<span class="t2">' + pinyinContent + '</span> ';

else if(pinyinContent.match(/.*[ǎěǐǒǔǚǍĚǏǑǓǙ].*/g))

output = output + '<span class="t3">' + pinyinContent + '</span> ';

else if(pinyinContent.match(/.*[àèìòùǜÀÈÌÒÙǛ].*/g))

output = output + '<span class="t4">' + pinyinContent + '</span> ';

else

output = output + '<span class="t5">' + pinyinContent + '</span> ';

}

document.getElementById("pinyin").innerHTML = output;

 

// Pinyin plitter adapted from:

// https://github.com/pepebecker/pinyin-split

 

function normalizePinyin(text){

text = text.normalize('NFD').replace(/\u0304|\u0301|\u030c|\u0300/g, '')

return text.normalize('NFC').replace(/(\w|ü)[1-5]/gi, '$1').toLowerCase()

}

 

function pinyinSplit(text, everything=false, wrapInList=false) {

const list = Array()

text = text.toString();

let prevWordFound = false

let wordEnd = text.length

while (wordEnd > 0) {

let count = wordEnd

let wordFound = false

while (count > 0) {

const word = text.substring(wordEnd - count, wordEnd)

if (syllables.includes(normalizePinyin(word))) {

wordFound = true

list.push(wrapInList ? [word] : word)

wordEnd -= (count - 1)

break

}

count--

}

if (!wordFound && everything) {

const prevIndex = list.length - 1

const prevEntry = list[prevIndex]

if (wordEnd === text.length || typeof prevEntry === 'object' || prevWordFound) {

list.push(text[wordEnd - 1])

}

else if (typeof prevEntry === 'string') {

list[prevIndex] = text[wordEnd - 1] + prevEntry

}

}

wordEnd --

prevWordFound = wordFound

}

return list.reverse()

}

</script>

 

Styles:

Spoiler

.t1{ color: #FF6666; display: inline;}

.t2{ color: #02B31C; display: inline;}

.t3{ color: #1510F0; display: inline;}

.t4{ color: #E299FF; display: inline;}

.t5{ color: #777; display: inline;}

 

.nightMode .t1{ color: #FF6666; display: inline;}

.nightMode .t2{ color: #02B31C; display: inline;}

.nightMode .t3{ color: #ACABF8; display: inline;}

.nightMode .t4{ color: #E299FF; display: inline;}

.nightMode .t5{ color: #B0B0B0; display: inline;}

 

 

 

How To Do It:

Use an existing note type, or create a new note with a pinyin field. You don't need to call it "Pinyin", you can call it whatever you want and just use your own field name. Edit the card type that you want to add colours to. Go to the side that you want to (front or back) Add the pinyin field like this: <span id="pinyin">{{YourPinyinFieldName}}</span>  change "YourPinyinFieldName" to whatever you called your pinyin field in Anki. At the very bottom of this section, paste the "main code" content: Go to the "styling" section. Add the styling code from above Enjoy coloured pinyin.